Timeline ScrollTrigger with animations middle in center of the screen

[Bjarke]

Hello :)

 

I'm trying to make a sequence of images that will be animated with ScrollTrigger, so each element will have following animation:

When the element is entering the screen, the element should have width 100% and have a blur 10px.
When the elements center is in the middle of the screen, the element should have width 50% and blur 0px.

When the elements bottom is leaving the screen, the element should have width 100% and have a blur 10px.

Here's the codepen with my demo: 

See the Pen QWYvbNJ by bjarke-rasmussen-the-sans (@bjarke-rasmussen-the-sans) on CodePen

[mvaneijgen]

Hi @Brille Bjarke welcome to the forum!

 

I've changed your width animation to the property scale, which is much more performant to animate and I've disabled your first tween, this one was doing nothing for 33% of your animation, because width: "100%" and filter: "blur(10px)" are the defaults you've given them. I've also enabled the markers, so that you can see what ScrollTrigger is doing. You've set `scrub: 0`, which is the same as `scrub: true` or were you trying to do something specific?

 

To me this is pretty much as you describe it, but if I'm missing something let me know! 

 

Hope it helps and happy tweening! 

 

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

[Bjarke]

Thank you very much @mvaneijgen for the fast reply!

 

So what if I want text below the image, that I would like not to scale — then I guess would have to use the width property?

But then it seems like the scrollTrigger start/end is slowly moving as I scroll down the page.

Here's a codepen with my approach: 

See the Pen zYewaVo by bjarke-rasmussen-the-sans (@bjarke-rasmussen-the-sans) on CodePen

 

[mvaneijgen]

You could do something like this, you will maybe then have to change your layout a bit to get it exactly how you want. But really inspect the difference, the scale example is perfectly smooth and the width one seems pretty sluggish. Personally when I scroll to much at the width example I get a bit sea sick. 

 

13 minutes ago, Bjarke said:

But then it seems like the scrollTrigger start/end is slowly moving as I scroll down the page.

Yep, not only the width changes in your example also the height and because it is a property that calls a browser repaint on every change (that is also the reason it is sluggish) it needs to move all the other elements below it, this will make it things never line up like you want them to, so you have to choose what you find more important. Personally I would go with the scale option and rethink your layout a bit so you can have the best of both worlds.

 

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

[Bjarke]

Thanks again for the fast reply @mvaneijgen !!

 

The thing is that I would like the text container to have the same width as the image and I don't want the spacing around the image to change, like it does when you use scale.

[Rodrigo]

Hi,

 

That's just CSS related and not really a GSAP issue. This seems to work the way you intend:

.info {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

Hopefully this helps.

Happy Tweening!