Crowleks Posted January 23, 2020 Share Posted January 23, 2020 Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 23, 2020 Share Posted January 23, 2020 Hey Crowleks and welcome to the GreenSock forums. What part of the page are you referencing? There's a lot of animation happening... Also what have you tried? How can we help? Link to comment Share on other sites More sharing options...
Crowleks Posted January 23, 2020 Author Share Posted January 23, 2020 Hi, ZachSaucier. the part where while scrolling the elements are pulling from the bottom of the page and then like pull up tighter to each other and then kind of bounce when you stop scrolling Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 23, 2020 Share Posted January 23, 2020 I'm guessing that they detached the elements from the normal scroll of the page and then animate each one to a new position using a staggered offset (starting with the top most elements on the page and then going downwards). GSAP could do that bit quite easily with its staggers. You'll have to keep track of the scroll position and inside of the scroll event animate to the new position with some ease. A thread that can help with the basic mechanics I link to below but you'd need to add the functionality to stagger the movement of each individual element yourself: More information about GSAP's staggers: See the Pen vYBRPbO by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Crowleks Posted January 23, 2020 Author Share Posted January 23, 2020 ZachSaucier thank you so much for helpful advice. will read through the documentation 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