Bezier TimelineMax halfway and/or starting point

[catchnewyork]

TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand.

 

On this example, The things that don't make sense to me.

 

1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point.  This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point?

 

2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1...

 

3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!

See the Pen OpaGor by sias (@sias) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

Thanks for the demo. Very helpful.

 

1)

When you use an SVG <circle> the browser pretty much controls where the start point of the path is. Your trick of rotating it is what most people do in this case.

 

2)

To get the timeline to remain paused with the small black circle snapped to the stroke you can force it to render the first frame by jumping to a progress(1) and then back to progress(0) instantly like:

tl.progress(1).progress(0).pause();

3) 

Yes, you can tween halfway through the Bezier animation by tweening the progress of the timeline.

 

See this demo: http://codepen.io/GreenSock/pen/YwOWmQ from 7 Hidden Gems of GSAP

 

I modified your demo so that when you mouse over the svg the animation only plays half-way using this technique

 

http://codepen.io/GreenSock/pen/VpqQRR?editors=0010

[catchnewyork]

Thank you this is awesome!