Jump to content
Search Community

Path animation while vertical scrolling

tsun4ever 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 guys,

 

for a website project, i would like to perform a path animated sparkle along a cable / wire while scrolling down. 

Do you think it is possible to perform this kind of animated path with Tween ?

Maybe with the Raphael plugin ?

 

I think i gonna use SuperScrollarama for handling the vertical scrolling combined with TweeMax library, depending on the ability to perform animated path with Tween of course.

 

Any ideas or inspiration website ?

 

Thanks !

 

Cheers,

Chris

Link to comment
Share on other sites

Absolutely - BezierPlugin allows you to animate things along a path. In fact, you can even just feed points to it and it'll plot a smooth Bezier through those points for you, allowing you to adjust the "curviness". Check out the docs at http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

Is that what you were looking for? I believe this was used on the Ben & Jerry's site here: http://www.citychurned.benjerry.com/city/sf/ (click on one of the cities at the top and you'll see the truck animate along the curved path and autoRotate).

Link to comment
Share on other sites

Wow thanks guys !

 

GreenSock :

Thks for the clue and the docs.

Ben&Jerry website is quite interesting, but i am more looking for a vertical scroll concept actually.

 

Rodrigo:

The codepen leads to think that it is quite "easy" indeed.

 

I hope this bezier path animation will be working with the SupeScrollarama jquery plugin, any idea of that ?

 

Lets try some testing :)

 

EDIT : just found this useful thread on bezier plugin and superscrollorama : http://forums.greensock.com/topic/7481-bezierplugin-undefined/

 

Cheers,

Chris

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...