Scroll animation along a bezier path

[philgwill]

Hi, I'm using the ScrollMagic plug to create a bezier path animation like the one here

 

http://scrollmagic.io/examples/expert/bezier_path_animation.html

 

But what I'd can't get it to do is draw a dashed line behind it as it goes through. Would anyone be able to help?

[PointC]

Hi philgwill 

 

Welcome to the forums.

 

What have you tried so far? We provide our best help when we can see some live code. If you could make a CodePen, that would get you the best answers.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

For now, this post may help you

http://greensock.com/forums/topic/11997-animate-dot-particles-on-bezier-path/?p=49182

 

Happy tweening.

[philgwill]

Here's a codepen of the animation I'm using

See the Pen VajVNW by anon (@anon) on CodePen.

 

I've seen quite a few examples like the one you've shown but I can't seem to get it added in. I just need a line to follow behind the plane as it moves

[Carl]

tweaking the example Craig provided you can add some set()s to the timeline to toggle the opacity of the dots as the animation plays:

http://codepen.io/GreenSock/pen/zqmWdv

 

 

However, using SVG for the path is really the best as you can tap in to DrawSVG's path-revealing nature:

http://codepen.io/GreenSock/pen/jEEoyw

 

If you use DrawSVG in conjunction with svg masking you can reveal any style of stroke like:

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

 

And if you throw MorphSVG into the mix you can use an svg path to define the bezier points for a bezier tween!

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

 

Both DrawSVG and MorphSVG are bonus plugins for Club GreenSock members: http://www.greensock.com/club

[Carl]

And the best example of them all: http://codepen.io/PointC/pen/zrQLvO (from Craig)

[philgwill]

See the Pen zqmWdv by GreenSock (@GreenSock) on CodePen.

 

that's exactly what I want to happen but I can't figure out how to get it into the ScrollMagic plugin so it does that animation as you scroll

[Carl]

I tweaked some of the earlier code and pasted it in:

 

http://codepen.io/GreenSock/pen/aNRMBv

 

pretty close, might have to work on re-positioning the dots a little.