Something happening at the 'end' of scrollTrigger that I can't figure out.

[UncoloureColors]

First time using gsap 💪 and I'm having an issue that I can't figure out the reason of it.
The issue is, when I scroll past the 'end' of the scrollTrigger, my container gives a 'jump' reappearing from top to bottom and the same goes if I'm past the 'end' and go up again, it jumps once more, but this time from bottom to top.

I tried to simulate it on codepen but wasn't able to reproduce it, so I'm sending a link with a gif of my screen recording so you can see better what I'm point out.(sorry the gif size exceeds the 1mb attachment): https://drive.google.com/file/d/1mCx4iXIWg0IQVzEFKAbb7ZXtc71FoDxw/view?usp=share_link
And this is my gsap code:
 

	gsap.registerPlugin(ScrollTrigger);

	function initScrollTrigger() {
		const container = document.querySelector('.container-mvp');
		const sections = gsap.utils.toArray('.section-mvp');
		const scrollableDistance = container.scrollWidth - window.innerWidth;

		gsap.to(sections, {
			x: () => 1* -scrollableDistance,
			ease: 'none',
			scrollTrigger: {
				trigger: '.container-mvp',
				pin: true,
				pinSpacing: true,
				scrub: true,
				start: 'center center',
				end: () => '+=' + scrollableDistance,
				markers: true
			}
		});
	}

	initScrollTrigger();

	window.addEventListener('resize', () => {
		ScrollTrigger.getAll().forEach(trigger => trigger.kill());
		initScrollTrigger();
	});

Has anyone have an ideia what it might be?

[Cassie]

Without seeing the issue in a minimal demo we're really just troubleshooting blind. If you can recreate it in codepen I'll take a look for you.

The only thing I can think is that your triggers are a bit out of whack, sometimes if you create scrollTriggers in the wrong order (Not the order they appear on the page) this can happen. 

 

ScrollTrigger.sort() can help this -
https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()

A big tip though, you don't need to kill and recreate scrollTriggers on resize like you're doing here, you can use invalidateOnRefresh to refresh any functional values that need recalculating on resize!

gsap.to(sections, {
 x: () => -1 * (container.scrollWidth - window.innerWidth), // this will refresh
 ease: 'none',
 scrollTrigger: {
  trigger: '.container-mvp',
  pin: true,
  pinSpacing: true,
  scrub: true,
  start: 'center center',
  end: () => '+=' + (container.scrollWidth - window.innerWidth), // and this
  markers: true,
  invalidateOnRefresh: true // invalidate and recalcalculate functional values on resize
 }
});

 

[UncoloureColors]

Hello Cassie!
Thank you so much for reply and tips!

Regarding the minimal demo, I wish I could recreate it!
I had created a test, but the issue doesn't happen in it.

See the Pen wvbpbWK by tiago-ascen-o (@tiago-ascen-o) on CodePen

I'm using Wordpress elementor, could it be some kind of conflict?
And I'm not sure what you say by 'order of the scrollTriggers'. I only have one in that particular page

[Cassie]

If you can't recreate it in codepen, can you create a very simple page using elementor that only includes what's necessary to show the issue?

 

The key to debugging is to basically strip things back to the very basics so that you eliminate everything but the things involved in the issue 

[Cassie]

Also just FYI, there was a reason I moved 'scrollableDistance' into the functions in the tween. You can't have 'scrollableDistance' as a variable because that's not going to get updated when the page resizes. Here's an updated demo!

See the Pen KKLoeEW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Cassie]

Just following up on the DM you sent with the link to your site. - this is the issue! Stray CSS transition on the pinned container

 

See the Pen zYQWagj?editors=1100 by GreenSock (@GreenSock) on CodePen

[akapowl]

7 minutes ago, Cassie said:

this is the issue! Stray CSS transition on the pinned container

I was just about to answer with a strong suspicion.

When using Wordpress / Elementor these jumps on pin / unpin are a typical sign of CSS transitions being applied somewhere on the element that gets pinned.

Just as in this other recent post and the older one below.

Maybe those can help you figure out what to look for.

Edit: And now I see, that Cassie already seems to have pinpointed the exact element/transition.

 

 

[UncoloureColors]

Yeah, that's it!!
Thank you so much Cassie for the help and also thank you akapowl!
I have no idea where that transition is coming for but thanks to you I know now where to look!

Thank you!!

EDIT: Yeah this .e-con { transition-property: none !important; } solves the problem 🥲

Edited June 21 by UncoloureColors
Adding extra

[Cassie]

Ah a common issue!

 

I'll add it to the wordpress page in the docs.