How to update timeline prop when resize screen width fluid brakpoint on timeline with scrollTrigger

[Ivan Mocs]

can i change the "end" property on the timeline when windows is resized?

 

 

I mean can when the highest viewport is 2560 : "end+=20%,"

and at the lowest resolution of 1200 : "end+=0%",

and when windows is resized then "end" will change fluidly

 

	var nav_hide = gsap.timeline({
		scrollTrigger: {
			trigger: ".hide-me2",
			start: "top top",
			end: "+=20%",
			// markers: true,
			scrub: true,
		}

 

 

 

[akapowl]

48 minutes ago, Ivan Mocs said:

can i change the "end" property on the timeline when windows is resized?

 

You can; have a look at gsap.matchMedia() 

 

It was added in GSAP 3.11 and replaces the older ScrollTrigger.matchMedia() from now on.

      

Here is an example with ScrollTrigger from the collection over on codepen.

See the Pen KKoMpMv by GreenSock (@GreenSock) on CodePen

 

[GreenSock]

Yep, @akapowl is exactly right. You could probably just use a function-based value if all you want to do is change the "end", like: 

 

end: () => window.innerWidth < 500 ? "+=300" : "+=600"

Because that'll get called whenever ScrollTrigger.refresh() gets called (that happens when the window gets resized).