GSAP Matchmedia

[Dmoco]

Hi All, 

 

I am having some slight issues with adding a matchmedia to my .tl animation. 

 

I have included a pen however I have only including the code to my animation and not the HTML or CSS because i'm using webflow and theres a lot of going on there and also because my animation was working perfectly fine until I added the matchmedia. 

 

Can someone let me know why it may not be working? I am trying to change the the width of the .logo-container class depending if on mobile or desktop. (80vw for mobile, 20vw for desktop). 

 

Also just for easy viewing when looking at the Pen, the snippets bellow are exactly what I added to the gsap when trying to include match media, and without these parts the animation was working fine.

 

let mm = gsap.matchMedia ();

mm.add({
    isDesktop: "(min-width: 800px)",
  isMobile: "(max-width: 799px)"
}, (context) => {
    let {isMobile, isDesktop} = context.conditions;


width: isMobile? "80vw" : "20vw",

 

 

I feel that I have wrote everything correctly after watching Cassies youtube tutorial, but maybe I have wrote something incorrect or missing something, I would be incredibly grateful if someone could let me know where I might be going wrong. 

See the Pen LYqwGjM by Dmoco (@Dmoco) on CodePen

[GreenSock]

It looks like malformed code to me, but probably just because you copied/pasted a small chunk. You definitely shouldn't be creating your timeline OUTSIDE of the matchMedia: 

// ❌ BAD
let tl = gsap.timeline();
let mm = gsap.matchMedia();

mm.add({
  isDesktop: "(min-width: 800px)",
  isMobile: "(max-width: 799px)"
}, (context) => {
  tl.from(...);
});


// ✅ GOOD
let mm = gsap.matchMedia();

mm.add({
  isDesktop: "(min-width: 800px)",
  isMobile: "(max-width: 799px)"
}, (context) => {
  let tl = gsap.timeline(); // <-- create INSIDE the matchMedia()
  tl.from(...);
});

Because remember that inside a matchMedia(), it records any tweens/timelines created and then reverts them when it no longer matches, but when you create the timeline OUTSIDE, it won't revert that. 

 

And by the way, there's no such thing as from: "beginning" on a stagger. Maybe you meant from: "start" which is the default anyway, so you can simplify it: 

// old
stagger: { each: 0.05, from: "beginning" }

// new
stagger: 0.05

I'd also strongly recommend updating to the latest version of GSAP. You're using 3.11.4 but you should be using 3.12.4.

 

Does that help?