Jump to content
Search Community

Change timeline settings on resize

buster808 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

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...