Reseting dom element to start position on resize

[cTigerDev]

On resize, when disabled, the dom object keeps the animation. I want it reset to its original position when disabled. Updated code below with working resize events

 

let tl = gsap.to(child, {y: -50}),
    st = ScrollTrigger.create({
      trigger: child,
      start: "top 80%",
      end: "bottom 10%",
      scrub: true,
      animation: tl
    });
console.log(st.animation); // tween
if (Foundation.MediaQuery.atLeast('xlarge')) {
  st.enable();
} else {
  st.disable();
}
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  if ( newSize == 'large' && oldSize == 'xlarge') {
    st.disable();
    ScrollTrigger.refresh(true);
  } else if ( newSize == 'xlarge' && oldSize == 'large') {
    st.enable();
  }
});

 

[ZachSaucier]

Hey cTigerDev. If I'm understanding you correctly, you can call tl.progress(0) to set the timeline's state to the start when you disable it. A demo would be helpful in us helping you.

[cTigerDev]

5 minutes ago, ZachSaucier said:

Hey cTigerDev. If I'm understanding you correctly, you can call tl.progress(0) to set the timeline's state to the start when you disable it. A demo would be helpful in us helping you.

 

Perfect! Exactly what i needed! Thanks a bunch Zach. i knew it was something simple!