Scroll progression animation with scrollbar and SVG based

[Marina Gallardo]

Hi team,

 

I have scenes based in viewBox animation (one SVG controlled with mousewheel), but I want to make an upgrade: I want to add the native scrollbar and make the animations progressed while making scroll (example: http://www.town.shimane-misato.lg.jp/misatoto/). 

 

Any tips on how to make that?

 

I am inspired this viewBox animation example (https://greensock.com/forums/topic/12017-animate-svg-viewbox/) but I want the behavior of native scroll and progress.... just like this:  http://www.town.shimane-misato.lg.jp/misatoto/

 

Please help, thank you very much

 

[ZachSaucier]

Hey Marina.

 

First, create the animation timeline that you want to use. 

 

Second, update the .progress() of the master timeline for that animation on scroll. That's it!

 

Here's a very basic demo of the effect:

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