djdnl13 Posted April 27, 2021 Share Posted April 27, 2021 Hi there, I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections. I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far. Thanks in advance. See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 27, 2021 Solution Share Posted April 27, 2021 Welcome to the forum @djdnl13 5 hours ago, djdnl13 said: I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. Sure, there are actually multiple approches you could use. Here is one example that makes the whole thing a timeline. You'd probably want to read up on how durations and the position paremeter work with tweens/timelines that have a ScrollTrigger with scrub applied to tweek everything to your liking. I also added some non scrubbing animations on the header in the top left corner, calculating when to trigger them based on the body as the trigger, triggering when each of the panels hits the top. Hope this is a bit helpful. See the Pen 5d5c54eb5dd09c9a4322f108b8708acb by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
djdnl13 Posted April 28, 2021 Author Share Posted April 28, 2021 Thanks @akapowl ! This is the solution, I will read the link to have everything clear. Daniel 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