goooon Posted May 15, 2021 Share Posted May 15, 2021 Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much See the Pen JjWXQGG by Gon82 (@Gon82) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted May 15, 2021 Share Posted May 15, 2021 Hye @goooon If you want the scroll-animation to be played on that click AND the scroll-position to be updated you should best just auto-scroll to the position you want - you can use GSAP's scrollTo-Plugin for that. What I would recommend is not making the duration of your ScrollTrigger dependent on some height (which you do by setting the end to '+=600%') but making it dependend on width instead - maybe something like end: "+=" + (window.innerWidth*6) because that will make it way easier for you to get the right position to scrollTo. Here is how you could do it See the Pen 2ea2065e369bf69eeb2052009daf836a by akapowl (@akapowl) on CodePen Edit: I guess I was not thinking straight there, so I gotta correct myself a bit here. Of course you could also leave it at end: '+=600%' and just use the window's innerHeight as a base for the scrollTo-tween. See the Pen fdcd7176fe8bf3c03b9dd253bcdbdff7 by akapowl (@akapowl) on CodePen 6 Link to comment Share on other sites More sharing options...
goooon Posted May 16, 2021 Author Share Posted May 16, 2021 @akapowl Thank you so much for helping me so much! 3 Link to comment Share on other sites More sharing options...
Ritik Posted October 25, 2023 Share Posted October 25, 2023 @Cassie why did @akapowl add .addPause() isn't the timeline defined to scrub? Link to comment Share on other sites More sharing options...
akapowl Posted October 25, 2023 Share Posted October 25, 2023 6 hours ago, Ritik said: @Cassie why did @akapowl add @Cassie I didn't. It was in @goooon's example already when I forked it. So if you're interested in why they did that, It would probably be best to ask them. Maybe it was just for the sake of testing the animation without ScrollTrigger hooked up to it. Because, yes, since the animation is being scrubbed by ScrollTrigger, the addPause() doesn't actually do much 🫠 2 Link to comment Share on other sites More sharing options...
goooon Posted November 16, 2023 Author Share Posted November 16, 2023 On 10/25/2023 at 4:59 AM, Ritik said: @Cassie why did @akapowl add .addPause() isn't the timeline defined to scrub? @Ritik I added a pause because, in my first approximation the button plays the timeline. without the pause it would continue to the end. function(){ TL.play('SECTION_1'); }); 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