Jump to content
GreenSock

Ivan Mocs

can remove property scroller in scrolltrigger when on mobile without mediamatch?

Recommended Posts

can remove property 'scroller' in scrolltrigger when on mobile without mediamatch() ?

 

this my code :

 

my_element.forEach((my_element, i) => {
	let tl = gsap.timeline({
		scrollTrigger: {
			trigger: my_element,
			scroller: () => window.innerWidth < 1152 ? "" : "[data-scroll-container]",
			start: "top top",
			end: "bottom top-=10%",
			pinSpacing: false,
			pin: true,
			// markers: true,
			scrub: true
		}
	});

});
Link to comment
Share on other sites

Hi,

 

The scroller option is basically what gives a ScrollTrigger instance the scroll value it uses to pretty much do everything. Beyond re-creating the ScrollTrigger instance again when passing a specific breakpoint I can't think of another way and I'm not sure that there is dynamic way to do this to be honest. Think about it, if you create a ScrollTrigger instance and then you tell GSAP, "I want this other element to control this instance now", the logical thing to do would be to do all the calculations again and update the new instance based on the current scroll position.

 

Maybe @GreenSock could give offer some clarification in this subject as He knows all the ins and outs of GSAP.

 

Happy Tweening!!!

Link to comment
Share on other sites

Yep, @Rodrigo is correct - you can't change the "scroller" value dynamically like that. Everything internally is based on that, so it's just cleaner to kill it and recreate the instance. 

 

Is there a particular reason you don't want to use gsap.matchMedia()? 

Link to comment
Share on other sites

I have a problem when the window is resized to mobile size, the value of 'start' scrolltrigger jumps, I don't know where the error is, so from that I think changing the 'scroller' value can fix it

1 hour ago, GreenSock said:

Yep, @Rodrigo is correct - you can't change the "scroller" value dynamically like that. Everything internally is based on that, so it's just cleaner to kill it and recreate the instance. 

 

Is there a particular reason you don't want to use gsap.matchMedia()? 

See the Pen XWqRPrr by adeivan (@adeivan) on CodePen

Link to comment
Share on other sites

I'm not very familiar with LocomotiveScroll, but that definitely looks like the culprit here. Unfortunately that's not a GreenSock product and we can't support it here. I'd suggest switching to ScrollSmoother if you'd like some support. 

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.
×