HadiH Posted September 8, 2021 Share Posted September 8, 2021 Hi, Is it possible to chain a second scrollTrigger after the first scrollTrigger finish its animation? I tried using gsap.add().add() but it seems like this method isn't suitable as I can't make sure the second animation occur only after the first animation has finished. Then I tried using onComplete event callback method. It worked well for a regular timeline, but it didn't work when I used scrollTrigger. Is it because I didn't set the trigger and start? I'm not sure how to set the trigger because it should occur right after onComplete from previous animation so I thought there's no need to set the trigger. Here is a breakdown of what I'm trying to do. 1. Title text will shrink to a certain point as the page scrolls down. 2. Description text should appear or disappear depending on the scroll direction once the title text has reached the certain point. The first point has been achieved. As for the second point, I can only make the appear animation once when the page is scrolled down for the first time. See the Pen rNwaXJK by hadiihartono (@hadiihartono) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 8, 2021 Share Posted September 8, 2021 Hey there HidiH, The 'start' points for a scrollTrigger are positions on the page - not positions in a timeline. You'll want to make sure that the 'start' position of the second scrolltrigger is positioned after the 'end' of the first. setting markers:true on your scrollTriggers will help debug this. 5 Link to comment Share on other sites More sharing options...
HadiH Posted September 9, 2021 Author Share Posted September 9, 2021 Hi Cassie, I have updated the codepen, adding 'trigger', 'start', and 'markers'. When I scroll up, the description text is not reversing. Can you help me with that? Thanks Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 9, 2021 Solution Share Posted September 9, 2021 Hey there HadiH, Looks like you may be overcomplicating things a bit! Timelines are great for building sequenced animations - so if you're just trying to make an animation flow after another one there's no need to call a new timeline in an onComplete function with just one tween in. You can add that tween to the end of the original timeline and by default it'll play when the previous tween completes. If you need to overlap the tweens you can use the position parameter. I'd also recommend setting the description position with CSS rather than calculating the SVG height and setting margin values in the JS. See the Pen XWgMjqy?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
HadiH Posted September 10, 2021 Author Share Posted September 10, 2021 Hi Cassie, Wow you are so incredible. I saw your codepen and thought 'huh so my desired animation can actually be done so easily'. You are right that I have been overcomplicating things. Guess I need to simplify my way of thoughts and polish my code some more. Thanks for the help! 👍 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 10, 2021 Share Posted September 10, 2021 No worries pal! Happy to help 🥳 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