Two-part Boxed Slider Reveal

[BradC28]

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

[Carl]

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

[BradC28]

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! 

 

[Carl]

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

[BradC28]

Perfect! This has been super helpful.

 

Thank you.