ScrollTrigger.matchMedia functional for gsap.timeline

[_Greg _]

Hi!

Does it have somehing like ScrollTrigger.matchMedia functional but for gsap.timeline somethinkg like:

 

let tl = gsap.timeline()



tl.matchMedia({
 // desktop
  "(min-width: 800px)": function() {
    tl.to(el, {x: 100})
  },
  // mobile
  "(max-width: 799px)": function() {
    tl.to(el, {y: 400, autoAlpha: 0}) // other animation for mobile
  },
  // all 
  "all": function() {
    tl.to(el, {scale: 2})
  }
})

How better create something like this with gsap.timeline?

[ZachSaucier]

Hey Nekiy2. You can use regular matchMedia functions for this sort of thing. However, they won't switch out tweens within timelines.

 

How about you create a minimal demo showing the sort of thing that you're trying to do and then we can help out with how we might approach it?

[_Greg _]

Thank you @ZachSaucier !

I create a simple demo:

 

See the Pen VweRyqm?editors=0010 by -greg- (@-greg-) on CodePen

 

I wan't to change animation on resize 

 

[GreenSock]

@Nekiy2 it looks like you just keep adding tweens to the same timeline, so they all pile up (sequence). Just add tl.totalTime(0).clear(); to the top of your changetween() function and that should give you what you're after. Right?