add class after horizontal scroll

[kodralex]

I've got a panel that uses scrollTrigger and pins the scrolls horizontally and then unpins. At the point of unpinning I'd like to add a class 'stuck'.

 

The code I'm using for this section is like this

 

// Research section panel
gsap.to(".panel-wrap", {
	xPercent: -200,
	x: () => innerWidth,
	ease: "none",
	scrollTrigger: {
		trigger: ".research-section",
		start: "top top",
		end: () => innerWidth * 3,
		scrub: true,
		pin: true,
		invalidateOnRefresh: true,
		anticipatePin: 1,
	}
});

I've tried using toggleclass and it partially works but after scrolling further down the page the class is removed. Any ideas?

See the Pen yLrYKyQ by alexkodr (@alexkodr) on CodePen

[Rodrigo]

Hi,

 

You can use the callbacks system ScrollTrigger has, more specifically onLeave and onEnterBack:

onLeave
Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). 

 

onEnterBack
Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().

 

So you can add the class in the onLeave callback and remove it on the onEnterBack callback, if you want to remove it of course.

 

Hopefully this helps.

Happy Tweening!

[kodralex]

Perfect thanks Rodrigo 👍