lgo Posted July 31, 2021 Share Posted July 31, 2021 (edited) Hello guys, I would like to ask for your help about one animation I'm trying to do. The concept is the one you can see with the CodePen. But of course, I don't want to have the three "container-information" to overlay each other. I want the second container to begin his animation after the first one reach 0.6 of the path, same for third. That's why I tried to do my function with onComplete attributes but it's not working. I tried several things with delay too with timeline (delay works but container overlay at each step of the timeline), or to change the start of ScrollTrigger with dynamics var (it causes each animation to begin when the previous entire timeline finishes), so it did not work as I expected. I hope my code is not too bad ( not a very good JS dev ^^' ) and you will see the animation I want to have. Thanks a lot for your help PS : I had one more question, when I scroll to top, if I scroll too fast, the window is scrolling when my wrapper is not pin anymore. This causes a my "container-information" to scroll like in normal window. Is there a solution for this ? Thanks again ! See the Pen OJmZeGE by gregoiredeclic (@gregoiredeclic) on CodePen Edited July 31, 2021 by lgo forget one question Link to comment Share on other sites More sharing options...
GreenSock Posted August 1, 2021 Share Posted August 1, 2021 I'm not sure I really understand what you're after, but here's my guess: See the Pen MWmXeeq?editors=0010 by GreenSock (@GreenSock) on CodePen I used a function-based value for the motionPath so that it returns a different start/end based on which target it is. Much simpler code. As for it becoming unpinned when scrolling up quickly, that's the correct behavior. You've got a scrub applied to the animation, so it takes a second to "catch up", of course. You can't have it both ways - either you can have it perfectly synchronized with the scroll position (scrub: true) -OR- you can have the smoothed effect of a numeric scrub (scrub: 1). Does that help? 2 Link to comment Share on other sites More sharing options...
lgo Posted August 1, 2021 Author Share Posted August 1, 2021 Hi, Thanks a lot for your answer. Unfortunately, this is not really what I was looking for. I would like to have the same animation with the same path for the three container, but I want the second to begin (same place as the first one begin) when the first one is at 60% of the path and the third begin when the second one is at 60% of the path. Please tell me if it's not clear. Thanks again for your help Link to comment Share on other sites More sharing options...
Solution mikel Posted August 1, 2021 Solution Share Posted August 1, 2021 Hey @lgo, That´s a job for stagger. See the Pen XWRYVoM by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
lgo Posted August 8, 2021 Author Share Posted August 8, 2021 Thanks guys 1 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