timeline with scrolltrigger batch

[gregor]

Hi,  I don't get it how to combine scrolltrigger batch with timeline.

My animation should look like this: the list of elements should be faded in and then the background changes its size.

 

and another problem is that the animated padding jumps back after the animation is finished... any ideas why?

 

best,

gregor

See the Pen oNmJOXB?editors=1010 by destroy90210 (@destroy90210) on CodePen

[mvaneijgen]

Because this is not how .batch() works.

 

.batch() is a special function built in to ScrollTrigger. And the docs explains how it works https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch(). Due to it being a special function it can skip some things, that a normal ScrollTrigger animation must do and this will make it more performant animating a lot of elements.  

 

Right now you've build a a .to() tween on which you set onEnter and onLeaveBack, but a tween does not have these properties, this is only something ScrollTrigger does. If you open the console you'll also see that GSAP is telling you this "Invalid property"onLeaveBack, Missing plugin? gsap.registerPlugin()"

 

I'm unsure of what the effect is you're going for, but you either have to convert your animations to a 'normal' tween or use a .batch ScrollTrigger and a 'normal' ScrollTrigger that does the two effects you want, but mix and matching like this is not possible. Hope it helps and happy tweening! 

 

[gregor]

Okay, thanks.

So I can't use the timeline with batch, did I understand that correctly?

I need to create a separate scroll trigger for the background animation and a scroll trigger with batch for the list fade effect?

 

And do you have any idea why the padding jumps back after the animation is finished?

See the Pen poGqmQr?editors=1010 by destroy90210 (@destroy90210) on CodePen

[GreenSock]

The padding issue is caused by the fact that you're trying to animate the padding of the very element that you're pinning. But pinning involves setting the padding, so you definitely should not be animating properties of the element you're pinning. So you can just create a wrapper <div> and pin that instead: 

See the Pen GRzzMgw?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[gregor]

thanks for the advice not to animate the pinned element