BradC28 Posted August 31, 2023 Share Posted August 31, 2023 Hi all, I'm building a boxed reveal effect very similar to the example shown here See the Pen YzrwEXm by GreenSock (@GreenSock) on CodePen but it has two separate parts: one container for text and one container for images. Both sections should scroll up and down together as the images will support the copy. I've tried to use the position parameter to match up these two sections on scroll but haven't nailed it down yet. The red box does not match up with the second text panel. I feel like it's close but need some help bringing it over the finish line. Any help is appreciated. Thank you! See the Pen QWzEjXa by bcerwin (@bcerwin) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted August 31, 2023 Share Posted August 31, 2023 thanks for the clean demo! that's a neat effect. yeah the problem is that your first loop runs all the way through before the second loop runs. note that both loops now use i*duration when every tween is added to tl. See the Pen YzdWqmB?editors=0010 by snorkltv (@snorkltv) on CodePen 1 Link to comment Share on other sites More sharing options...
BradC28 Posted August 31, 2023 Author Share Posted August 31, 2023 Thank you! Appreciate the quick response. Now that it's working I see the snap property needs some adjustment. What am I missing there? After the initial scroll, there is some gap between the slides if you allow to snap into place. Obviously it is then in the correct position at the end of the timeline. Thanks again! Link to comment Share on other sites More sharing options...
Solution Carl Posted August 31, 2023 Solution Share Posted August 31, 2023 so in the previous version you'll notice that you have to scroll a bit before the next section slides up. This means that there was some dead space in the beginning of the timeline. Since the loops were skipping the first panels when i === 0 then that means the first elements to be animated were being inserted at a time of 0.5 from the (i * duration) position parameter. We want the first position parameter to be zero so we can just use (i-1) * duration See the Pen QWzEKbm?editors=0010 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
BradC28 Posted August 31, 2023 Author Share Posted August 31, 2023 Perfect! This has been super helpful. Thank you. 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