Scrollytelling

[Forpee]

Hello All,

 

In https://takeboost.com/ there is a bottle that spins when you scroll 

How would one accomplish this..

 

Thanks

[spdyvkng]

I suggest looking into this page: https://greensock.com/docs/v3/Plugins/ScrollTrigger. Also looking into general GSAP tutorials.

[akapowl]

 

Hey @Forpee

 

ScrollTrigger is definitely the tool you want to take a look at for something like that.

 

From what it looks like to me, that page makes use of images rendered to a canvas, which are being sequenced through on scroll (explains the pretty long time it takes that page to load).

 

This thread here discusses a way how something like that could be done - but it's a whole lot to take in if you are only just getting started with scrollbased animations.

 

 

 

 

Another way could be to make use of WebGL (via three.js in the example below) and animate a 3D-object - but that's quite a bit to wrap your head around, too.

 

Maybe these examples can be somewhat inspiring though and help you get started.

 

See the Pen c356baf382331d4d3bc5bd4f4ff6b684 by akapowl (@akapowl) on CodePen.

[Forpee]

Thanks so much @akapowl !

I'm new to the community and am very grateful I recieved help so quickly