Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vm6ej04

Animating along path, auto rotate transform origin

Recommended Posts

Hello great almighty GSAP forum, here I am with another question I'm having.

 

Goal

  •  create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.

Progress/ attempts

  • Got most parts working, however there're a few visual things I just can't figure out.
  • I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg>

Help needed

  • I'd like to know how to make the image's transform origin to the tip or tail of the arrow
  • how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right.

 

I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data.

 

Question outside of this topic

  • Why isn't <image> tag visible on Safari, let alone IE??
  • The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari.

Added on 19th of April

To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg;

 

Thanks a lot!

post-51733-0-99810300-1491529219_thumb.png

See the Pen mWzXXJ by vm6ej04 (@vm6ej04) on CodePen

Edited by vm6ej04
Link to comment
Share on other sites

To get the arrow to very closely follow the black path try adding:

TweenLite.set("#arrow", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50});

see it: http://codepen.io/GreenSock/pen/Rpmdmv?editors=0010

 

Unfortunately, I don't have time to wrap my head around the other issues at the moment, but perhaps its enough for you to make some progress or sort out some of the other things. Not so sure how much I can help with that particle emitter.

  • Like 1
  • Thanks 1
  • Haha 1
Link to comment
Share on other sites

Thanks a lot!

To get the arrow to very closely follow the black path try adding:

TweenLite.set("#arrow", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50});

see it: 

See the Pen Rpmdmv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Unfortunately, I don't have time to wrap my head around the other issues at the moment, but perhaps its enough for you to make some progress or sort out some of the other things. Not so sure how much I can help with that particle emitter.

Link to comment
Share on other sites

Answer to my own question regarding emitter position.

I corrected the emitting position, align it to the centre of the arrow by getting the bounding box, using getBoundingClientRect() and just offset the emitting position accordingly.

 

 

See the Pen NpZNRw by vm6ej04 (@vm6ej04) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Had a similar if not the same problem with autoRotate of an svg object along a bezier path..... always a little off. Setting the above helped fix it... it was almost like the svg path wasn't rotating around it's center point.

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×