HumbleB Posted March 1, 2022 Share Posted March 1, 2022 (edited) I noticed that the "heading" and the "num" do not transition at the same time. You can see this when you scroll slowly. I'm not sure what it's causing this problem and how to fix it. I tried using a gsap.timeline() to get the transition to start the same time but I ended up with the same result. I also tried added scrub to '.head' gsap.to('.head', { scrollTrigger: { pin: '.head', scrub: true, end: '+=5000s', pinSpacing: true, } }); and removing toggleActions headings and nums but the result wasn't right See the Pen GROwdvX by HumbleB (@HumbleB) on CodePen Edited March 1, 2022 by HumbleB More information Link to comment Share on other sites More sharing options...
OSUblake Posted March 1, 2022 Share Posted March 1, 2022 Those are different sizes, so of course they are going to be triggered at different times. I'd just combine both of them, using whatever trigger you want kind of like this. headings.forEach((heading, i) => { gsap.to([heading, nums[i]], { opacity: 1, scrollTrigger: { trigger: heading, toggleActions: 'play reverse play reverse', start: '+=' + `${singleDuration * i}s`, end: '+=' + `${singleDuration}s`, }, }) }) 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