ragingrahul Posted October 9, 2023 Share Posted October 9, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 10, 2023 Share Posted October 10, 2023 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! Link to comment Share on other sites More sharing options...
ragingrahul Posted October 10, 2023 Author Share Posted October 10, 2023 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 10, 2023 Share Posted October 10, 2023 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! 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