romain.gr Posted February 18, 2022 Share Posted February 18, 2022 Hi, As the title says, I'd like to play a scrubbed/pinned animation only once and as soon as it finished clear up the inline css from the pinned item and remove the pin spacer parent from the dom, so when you scroll up again no animation occurs and I don't have have to scroll '3 windows.innerHeight' to reach the previous section. I actually managed to do it BUT : - I'm wondering if it's the proper way to do? Maybe there is a built in solution? - Is it going to cause issues if I have other scrollTrigger down in the page? I thought that just Killing the anim would do the job but I might not read the doc properly altought it says : "Kills the ScrollTrigger instance, immediately unpinning and restoring any pin-related changes made to the DOM by ScrollTrigger and removing all scroll-related listeners, etc." But actually it's not working that way, it does "cancel" it, but it doesn't clear up the pinned item and doesn't delete the pin-spacer. So I killed the dropCard anim, and clearProps on both the section and the pinSpacer. So here is the code : let dropCard = gsap.timeline({ onComplete: ()=> { // When the whole anim is finished initDrag(); // init draggable items dropCard.kill(); // Kill THIS ScrollTrigger gsap.set('.section--drop-card', {clearProps: 'all'}); // Clear up this section from added CSS from GSAP gsap.set($('.section--drop-card').parent('.pin-spacer'), {clearProps: 'all'}) // Clear up this section PIN PARENT from added CSS from GSAP }, // yes, we can add it to an entire timeline! scrollTrigger: { trigger: '.section--drop-card', pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: () => { return "+=" + window.innerHeight * 3}, // end after scrolling 500px beyond the start scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar markers: true } }); dropCard .from('.card', {scale: 2, 'border-width': '0.05vw', rotateX: (i)=>rotationX[i], rotateY: (i)=>rotationY[i], duration: 1, ease: Power3.easeIn, stagger: .2}, 'start') .from('.card', {autoAlpha: 0, duration: .5, ease: Power3.easeIn, stagger: .2}, 'start'); Thank you. See the Pen qBVpmXy by romaingranai (@romaingranai) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted February 18, 2022 Share Posted February 18, 2022 Hello there, @romain.gr The posts linked in this thread should help give you an idea for how to handle playing scrubbed/pinned animations only once. 2 1 Link to comment Share on other sites More sharing options...
romain.gr Posted February 18, 2022 Author Share Posted February 18, 2022 Hi @Akapowl, Thanks for the help, the only solution that worked in my situation is this thread, cause the 2 other ones doesn't really fix the issue of having multiple scrollTrigger later. So the solution is to refresh all scrollTrigger. Thank you! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 18, 2022 Share Posted February 18, 2022 Yeah, I just added that to thread, but maybe I should make it the first one. 1 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