Path animation while vertical scrolling

[tsun4ever 0 Likes (Newbie)]

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

[GreenSock 12,366 Likes (Superhero)]

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

[Rodrigo 3,484 Likes (Superhero)]

Hi,

 

Check this pens they illustrate the uses of the bezier pugin and how easy it is:

 

See the Pen Krfod by GreenSock (@GreenSock) on CodePen

 

See the Pen CHwDx by GreenSock (@GreenSock) on CodePen

 

Cheers,

Rodrigo.

[tsun4ever 0 Likes (Newbie)]

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