Leemoon Posted September 23, 2021 Share Posted September 23, 2021 I want the div move to the end of the browser and repeat. but when resize the browser how to change the y props in the same time? y: () => innerWidth doesn't work? thanks! See the Pen wvexEOG?editors=0110 by leemoon123 (@leemoon123) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 23, 2021 Share Posted September 23, 2021 Here are two options: 1) repeatRefresh: true gsap.fromTo("div", {x: 0}, { duration: 2, x: () => innerWidth, repeat: -1, repeatRefresh: true }); This just forces the tween to invalidate() on repeat (clear out any starting values and re-capture the ending ones too). I switched to a .fromTo() so that we can specify x: 0 as the start, otherwise the invalidated .to() tween would just start from wherever it currently is. The only down side is the iteration that's running while you resize will finish at the original destination (and then the next iteration will be corrected). 2) re-create the tween in a "resize" handler let tween; function resetTween() { let progress = tween ? tween.progress() : 0; tween && tween.kill(); tween = gsap.fromTo("div", {x: 0}, {x: window.innerWidth, duration: 2, repeat: -1}).progress(progress); } resetTween(); window.addEventListener("resize", resetTween); Does that help? 1 Link to comment Share on other sites More sharing options...
Leemoon Posted September 23, 2021 Author Share Posted September 23, 2021 yes, thanks for resolving my problem. 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