lucaluca Posted May 19, 2020 Share Posted May 19, 2020 Hello everyone! I would like to create a similar effect that you see in this website ( the stone ) : https://stonestyle.co.th Do you know of any tutorial similar to something like this to help me get started ? I have never used green sock before but this gave me the motivation to look into it. Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 19, 2020 Share Posted May 19, 2020 Hey lucaluca and welcome to the GreenSock forums! What effect on that site are you wanting to recreate? There are a lot of effects. Link to comment Share on other sites More sharing options...
lucaluca Posted May 19, 2020 Author Share Posted May 19, 2020 Hello, it's the effect visible on desktop view, of the stone that remains sticky in the page and opens up is small stones at the end of the scrolling Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 19, 2020 Share Posted May 19, 2020 The core of the approach is to Create an animation that rotates the object and then towards the end breaks it apart. If you want it to be 3D like what they have, it'd likely be good to use WebGL. Attach the progress of the animation to the page's scroll position. I outline the basics of how to do that in the control methods section of my article on animating efficiently (I recommend the whole article). GSAP is currently in the beta testing stages of a plugin for GSAP that makes animating on scroll like this much easier! Keep your eyes out, we're hoping to release it in the next couple of weeks 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