Forpee Posted March 29, 2021 Share Posted March 29, 2021 Hello All, In https://takeboost.com/ there is a bottle that spins when you scroll How would one accomplish this.. Thanks Link to comment Share on other sites More sharing options...
spdyvkng Posted March 29, 2021 Share Posted March 29, 2021 I suggest looking into this page: https://greensock.com/docs/v3/Plugins/ScrollTrigger. Also looking into general GSAP tutorials. 2 Link to comment Share on other sites More sharing options...
akapowl Posted March 29, 2021 Share Posted March 29, 2021 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 2 Link to comment Share on other sites More sharing options...
Forpee Posted March 30, 2021 Author Share Posted March 30, 2021 Thanks so much @akapowl ! I'm new to the community and am very grateful I recieved help so quickly Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now