Ivan Mocs Posted September 5, 2022 Share Posted September 5, 2022 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 More sharing options...
akapowl Posted September 5, 2022 Share Posted September 5, 2022 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 2 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 5, 2022 Solution Share Posted September 5, 2022 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). 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now