gregor Posted December 6, 2023 Share Posted December 6, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 6, 2023 Share Posted December 6, 2023 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! Link to comment Share on other sites More sharing options...
gregor Posted December 6, 2023 Author Share Posted December 6, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 7, 2023 Solution Share Posted December 7, 2023 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? 1 Link to comment Share on other sites More sharing options...
gregor Posted December 7, 2023 Author Share Posted December 7, 2023 thanks for the advice not to animate the pinned element Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now