Scrollsmoother help with overlapping elements

[JonoUWE]

Hey everyone. I'm working on a site that's using scrollsmoother and scrolltrigger and I can't get my head around how I can achieve the following effect:

The .big-quote element scrolls into the viewport first but is caught up by the parallax image section after it, with both being centred in the middle of the viewport at the mid-point of the interaction (if that makes sense), then as you scroll down they both scroll out of view (with the parallax section moving above the quote.

 

I tried using the data-from / data-to and the data-speed methods in the docs but I can't get either to do what I want it to. Sure there is an easy solution to this but I'm still a bit of a newbie with gsap!

See the Pen ZEwxwKQ by mrjonoces (@mrjonoces) on CodePen

[mvaneijgen]

Hi @JonoUWE welcome to the forum and thanks for being a club member 🎉

 

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. 

 

Here is an animation with out ScrollTrigger. I've wrapped your elements in an element called .myTrigger, because it is easiest to have one parent in which you animate everything. This makes it also really easy to position things with CSS. Personally I find it the easiest to have every element where I need them to be when the animation is done, in your case you said the center so I've positioned the elements right on top of each other in the center of the .myTrigger element. 

 

See the Pen OJdvKKE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

If that animation is looking good you can see how that looks on ScrollTrigger. You said you wanted the background to catch up with the text, so I've tweaked the timing a bit now the text animation takes 1 second and the background 0.5. and because of the position parameter it start - 80% of the previous tween the background animation will finish faster than the text although it started later. I've also set the ScrollTrigger to pin, now it will play the whole animation, before it un pins.

 

See the Pen vYbjBYW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

None of this uses SmoothScroller, this is in the below pen just used to smooth the scrolling of the visitor. Hope it helps and happy tweening! 

 

See the Pen YzBLKXE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[JonoUWE]

Thanks mvaneijgen, that's a useful strategy and with a bit of tweaking it's working on the site I'm putting together.