Change timeline settings on resize

[buster808]

Hi, Ive gone through previous threads but cant get this to work.

I want to change timeline settings if on mobile.

Do I need to kill one timeline then start another?

 

gsap.timeline()

    .from("#main-hero", {x:50, duration:1, opacity:0, ease:"circ.out", delay:0.5})
    .from("#inspired", {x:100, duration:1, opacity:0, ease:"circ.out"})
    .from("#digital", {x:-100, duration:1, opacity:0, ease:"circ.out"}, "-=0.8")
    .from("#design", {x:100, duration:1, opacity:0, ease:"circ.out"}, "-=0.8")

 

Thanks for any help

[PointC]

I think this thread can help you.

Happy tweening.

 

[buster808]

Ive got this working mostly but it doesn't work on-load like css media queries. 

function addMQListener(mq, callback) {
  if (mq.addEventListener) {
    mq.addEventListener("change", callback);
  } else {
    mq.addListener(callback);
  }
}

addMQListener(window.matchMedia("(min-width: 768px)"),
  event => {
    if (event.matches) {
        
        gsap.timeline()
        
            .from("#main-hero", {x:50, duration:1, opacity:0, ease:"circ.out", delay:0.5})
            .from("#inspired", {x:100, duration:1, opacity:0, ease:"circ.out"})

    
    } else {
            .from("#main-hero", {y:50, duration:1, opacity:0, ease:"circ.out", delay:0.5})
            .from("#inspired", {y:100, duration:1, opacity:0, ease:"circ.out"})
    }
  }
);