Jump to content


Scroll animation along a bezier path

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.



For now, this post may help you



Happy tweening.


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:




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



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



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



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

  • Like 2
Link to comment
Share on other sites

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

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.