Scroll Trigger Pin is jumpy

[ragingrahul]

I have this scrollTrigger animation where when pinning the the div that is getting pinned is bouncy, its not much prominent when you pin while entering the animation, but when animation ends and it unpins and exactly at that moment, if its scrolled up and the div is again pinned thats when its more jumpy.
i did use anticipate pin and saw it might be due to margin stacking so, removed margins too for 1 div.

Other than that, i have a set of json animations, which are taking time it initialize(approx 600ms ), as i am calculation where the end of the ScrollTrigger should be based on that json animations width, so i am finding it difficult on how should i call my animation function. Calling it instanteneously when

refreshInit is called it breaking the end width calculation

 

 

StackBlitz link-https://stackblitz.com/edit/nextjs-22dh7p?file=Component%2FCarousel.jsx

Edit:the whole animation breaks when the window is resized and refreshInit is called

 

[Rodrigo]

Hi,

 

I don't have a lot of time to go through all your code right now, but most likely this stems from pinning elements inside another main element and those elements being pinned are not 100vh height.

 

In these cases is better to use pinType: "transform" or pin the outmost parent element common to the elements you want to animate. Like these examples:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[ragingrahul]

Thank you!!
Also what might be the reason for the animation to break after refreshInit event is called even though the animations are called inside gsap.context?

[Rodrigo]

Honestly I couldn't tell you without dissecting your code line by line and following step by step what's happening. Unfortunately we don't have the time resources to do that.

 

In a quick glance what I can see is that you have this two methods initCard and TextSlideUp. In both you are creating ScrollTrigger instances that use the same trigger, both have invalidateOnRefresh: true and maybe the animations attached to those could be targeting the same elements, so that's where I'd look first, maybe try to create all animations in one go and in a single timeline, if possible. Also create those ScrollTrigger instances in the order they appear on the screen.

 

Hopefully  this helps.

Happy Tweening!