Overlay effect with scroll trigger

[lizettevanboom]

Hello everybody,

 

I've been struggling for a few days with this overlay scroll effect I want to build. I have attached a codepen. I want to create a transition effect between div-1 (yellow) and div-2 (green). Both divs have the same size as the viewport; (100vw by 100vh) and are on top of each other. When scrolling the second div becomes visible and is overlayed on the first div. The effect is connected to scroll with triggers and scrub.

The challenge is that I want to first pin div-1 for some time / distance, before the div-2 transition effect starts.

 

As you can see in my demo, so far I was only able to get the effect to work at all when the scroll trigger is on 'top top'. But this is not what I want, because this way div-1 disappears too fast and users won't be able to read the content of div-1 properly. I have tried a lot of stuff, such as creating a new scroll trigger to pin div-1 (by setting end: '+=3000', ) but I can't get this to work.

 

I was thinking this might be because of the positioning; the divs are right on top of each other, so I guess that makes it more difficult to set scroll triggers on each div one following the other? Is there a solution to this or does the absolute positioning on top of each other simply make the desired pinning before the transiton effect impossible?

Thanks in advance for any advice!

See the Pen GReLLJQ by edr2023 (@edr2023) on CodePen

[mvaneijgen]

Hi @lizettevanboom

 

That is where timelines come in!  Personally I find the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So here is your demo with ScrollTrigger disabled for now, so that we can just focus on the animation. I like to add empty tweens to a timeline when working with ScrollTrigger that just do nothing for x amount of seconds. Here it does nothing for 1 second and your animation tween also has a duration of 1 second.  

 

Normally in GSAP things work with durations, but when working with ScrollTriggers with a scrub value these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Als je nog vragen hebt horen wij het graag en hoop dat het help! Happy tweening!

 

See the Pen XWGQLrx?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Toso]

hi @lizettevanboom

 

I moved the styling for the div-2 inside the CSS to collect it all in one place also

 

i used 1 scrolltrigger to pin div-1 with pinSpacing false and another trigger for the div-2 to animate it ,

 

 

ofc @mvaneijgen solution is more professional and organized  🫡  but I wanted to give another quick lazy solution 

 

See the Pen oNVOrxN?editors=0110 by ahmed-attia (@ahmed-attia) on CodePen

[lizettevanboom]

Bedankt @mvaneijgen and thanks @Toso! It works, nice to see two different approaches. Good lesson for me that you can first set up an animation with a timeline and then convert it to distance.