How can I reset the animation when the browser resizes (Mobile/Tablet).

[aydinvivik]

Hello, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning.

 

When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work.

const isMobile = window.matchMedia("(max-width: 768px)");

function resize() {
  //...

  if (isMobile.matches) {
    animation.progress(0).kill();
    draggable.startProgress = animation.progress();
  }
}

Codepen demo:

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[mvaneijgen]

Hi @aydinvivik take a look at gsap.matchMedia() (https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/) much more powerful and build for GSAP!

 

Hope it helps and happy tweening! 

[aydinvivik]

Thank you @mvaneijgen