Jump to content
Search Community

How to play a scrubbed/pinned animation only once? And then delete the wrapping pin-parent.

romain.gr test
Moderator Tag

Recommended Posts

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

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! 

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...