Volt 22 Posted June 23, 2022 Share Posted June 23, 2022 Hello Everyone, I'm trying to achieve something seemingly simple but I'm having issues. I want to translate an element on scroll. I want the counter container to move upward by 32px and reveal the correct number, when the block on the right passes the ScrollTrigger marker. Right now, it's not working incrementally. It starts from 1 every time, and it doesn't work on scroll up. Link to comment Share on other sites More sharing options...
SteveS Posted June 23, 2022 Share Posted June 23, 2022 I'm short on time, so here's the best I can do. You were creating your scrollTriggers kinda odd and there is still some jank with the HTML/CSS, but the idea is the same. Fire a function to animate the element when you enter and leave a scrollTrigger. See the Pen mdXNJdg by SteveSDaBest (@SteveSDaBest) on CodePen 1 Link to comment Share on other sites More sharing options...
Volt 22 Posted June 23, 2022 Author Share Posted June 23, 2022 Thanks a lot SteveS. Link to comment Share on other sites More sharing options...
Volt 22 Posted June 23, 2022 Author Share Posted June 23, 2022 Hello SteveS, It gets a bit erroneous when a user scrolls back and forth on that section. https://voltmeup3.webflow.io/ Link to comment Share on other sites More sharing options...
SteveS Posted June 23, 2022 Share Posted June 23, 2022 @Volt 22 Yeah, something about the way relative px values are being calculated. Instead what you can do is get an array of y offsets and pass each function the index of the element hitting its trigger. so when section two hits its trigger, the number animates to position 2 on an array. Link to comment Share on other sites More sharing options...
Volt 22 Posted June 23, 2022 Author Share Posted June 23, 2022 Thanks for your response @SteveS. That helped. Problem solved. Thanks again. Link to comment Share on other sites More sharing options...
GreenSock Posted June 23, 2022 Share Posted June 23, 2022 By default, any tween with a ScrollTrigger attached gets rendered immediately so that it's ready to burst into action the moment the scroll position is crossed (performance optimization). When a tween renders for the first time, it records the start/end values internally so that it can quickly interpolate between them. You're creating all your tweens up front and they all have a ScrollTrigger, so they lock in their start value(s). You're coding it, however, assuming that each subsequent tween builds on the prior one. But the initial position is locked in for each one do to the immediateRender. Solution: set immediateRender: false. Or you could put all those tweens in a single scrubbed timeline like this: See the Pen LYQwNGJ?editors=0010 by GreenSock (@GreenSock) on CodePen It depends on what behavior you want (scrubbed or not). 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