Jump to content
Search Community

Scroll animation along a bezier path

philgwill test
Moderator Tag

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.

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.

:)

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:

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

  • Like 2
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.
×
×
  • Create New...