Jump to content
Search Community

The moving distance when resize occurred.

Leemoon test
Moderator Tag

Recommended Posts

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? 

  • Like 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.
×
×
  • Create New...