ScrollSmoother - Add effect in the middle of a page

[Simon.Gioffredi]

Hi,

 

I have done an immersive slide effect :

See the Pen rNdYxPY by simon-gioffredi (@simon-gioffredi) on CodePen

 

On my website this should be used in 2 templates.

 

The first one is an immersive template just like the first codepen and that's working like a charm because there is only this.

 

But the second template is an edito. So this animation can appear at the top, the bottom or the center of the page depend of what is choosed in our CMS.

 

And as you can see that's not working.

 

I understand why that doesn't work, but I don't know if there is a way to handle this ?

 

If I can't use ScollSmoother to achieve this should I try to rework this effect with a ScrollTrigger ?

 

Thx  

See the Pen OJvONKj by simon-gioffredi (@simon-gioffredi) on CodePen

[Cassie]

Yeah, that's definitely not going to work - You have to add the wrapper and content for scrollSmoother around *all* the content. Not quite sure what you're after as a way around this.

Easy enough to rework with a pinned scrollTrigger though!

 

I'd just create a timeline that does what you want first - then hook it up to ScrollTrigger.
 

[Cassie]

(also cute dogs. 100 forum points to you)

[Simon.Gioffredi]

Hi Cassie,

 

I tried to do it (around everything) but that's not working and I find this dirty in my architecture.

 

Do you have an example of this Timeline ?

 

I'm gonna do this too then, that's gonna be easier.

 

Yeah, I love dogs

[Cassie]

I don't have an example no - I'd have to sit and work it out. What have you tried so far - maybe we can do it together?

The first step would be to work out what elements are moving and by how much and then draw out a diagram or write out a step by step.

I guess from a glance you've got the wrappers and the background images and the containers. What's happening to each one?

[Cassie]

Here we go - I'm more familiar with the markup from our Observer docs so I've tweaked it to hook it up to ScrollTrigger for you.

 

Basically you just want to move the images and containers in different directions.

See the Pen JjLObQj by GreenSock (@GreenSock) on CodePen

 

[Simon.Gioffredi]

Hi @Cassie

 

Thank you so much for your work. 

I work on this actually but I don't know if that's a good way to do it

See the Pen dymZqvm by simon-gioffredi (@simon-gioffredi) on CodePen

 

Both of our solutions are not perfect, because there is only 1 image which moves.

 

And I need the slide to be in relative position, because the title give us the slide height.

 

I'm gonna continue to work on it

[Simon.Gioffredi]

I finally finished this animation.

 

See the Pen qBoVLxx by simon-gioffredi (@simon-gioffredi) on CodePen

 

I think there is a better way to do it because I got some performance issue sometimes. Someone has an idea ?

[GreenSock]

This is definitely a bad idea performance-wise:

onUpdate() {
  const bgRect = bg.getBoundingClientRect();
  if (this.time() !== 0) {
    gsap.set(title, {
      y: bgRect.y * -1 * 1.8
    });
  }
},

It's calling getBoundingClientRect() on every single tick which is expensive. And you're creating a whole new .set() on every tick too. And you nested a ScrollTrigger inside a child tween of a timeline that had a ScrollTrigger too - it's logically impossible to have both the parent's playhead and the scrollbar position control the playhead of a tween. 

 

I assume you wanted to do something like this maybe?: 

See the Pen gOeXEJz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And here's a simplified version markup-wise that I've added to the CodePen collection:

See the Pen BarmbXq by GreenSock (@GreenSock) on CodePen

 

[Simon.Gioffredi]

Hi,

 

Yeah, that's perfect. I just added a different y value to delay a little the title apparition, but that's perfect

 

Thank you