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();
}
});