Jump to content
GreenSock

Ivan Mocs

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

Go to solution Solved by GreenSock,

Recommended Posts

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,
		}

 

 

 

Link to comment
Share on other sites

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


 

  • Like 2
Link to comment
Share on other sites

  • Solution

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

  • Like 1
  • Thanks 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.
×