GSAP matchMedia problem (maybe bug)

[DanielLav]

Hello! I have found that my GSAP code does not work as expected when I use the matchMedia parameter.

 

The fact is that if I add an animation position (for example, in my case '<') when resizing when the window width is greater than 767, my square disappears (which is correct, because the condition is not met).

 

But as soon as I return the width of the window and it becomes less than 767, the red square does not reappear.

 

At what this error is observed only if I specify the position of the animation, for example '<').

 

It's pretty interesting. Can you please tell me if this is a bug or how can I use the position in my timeline and the matchMedia value at the same time?

 

Really looking forward to your reply.

 

Link to my codepen:

See the Pen PoxNZwq by ProjectDCL (@ProjectDCL) on CodePen

[Rodrigo]

Hi,

 

The issue I can see in your code is that you're creating the timeline instance and adding the first instance outside the MatchMedia scope:

tl.to(".text", {
  autoAlpha: 1,
  ease: "slow",
  duration: 1
});
mm.add("(max-width: 767px)", () => {
  tl.to(
    ".bm-others__item",
    {
      autoAlpha: 1,
      ease: "slow",
      duration: 1
    },
    "<"
  );
});

Now, when you play the timeline, it goes from the start, zero seconds, to the end one second. That timeline is still active, going forward at the one second position. Then you resize the screen and then the instance is removed from the timeline when you go above 768px. Then you go below the breakpoint, 767px and less, at that point a new instance is added to the timeline where the previous instance starts. The problem is that the timeline is still sitting at 1 second and you added the new instance when the previous instance starts, using the position parameter ("<"). Then you call tl.play(), but the timeline playhead is at one second, so the new instance never runs. If you run this code in the click event:

console.log(tl.time(), tl.totalDuration())

// Click before resizing -> 0, 1
// Click after resizing -> 1, 1

This can be resolved using restart:

https://greensock.com/docs/v3/GSAP/Timeline/restart()

 

$(".button").click(function () {
  tl.restart();
  console.log(tl.time(), tl.totalDuration())
  // Always logs -> 0, 1
});

Hopefully this helps and makes things clear.

Happy Tweening!

[DanielLav]

Hello! Sorry for the long answer.

 

Yes, your solution works. But it works on click and restarts the entire animation.

 

How can I make it only fire the tl part inside the matchMedia and when changing the width from 767 and vice versa?

 

Why do I need it. The fact is that on my real site the "close" icon appears on mobile devices and I need it to be displayed on devices when resizing and returning back.

[Rodrigo]

Hi,

 

Right now you're creating the timeline paused, outside the MatchMedia scope and the timeline restart depending on a button. Is better to just move everything inside the MatchMedia instance and leave a reference to the timeline outside it's scope:

let tl;
let mm = gsap.matchMedia();

mm.add("(max-width: 767px)", () => {
  tl = gsap
    .timeline({
      paused: true
    })
    .to(".text", {
      autoAlpha: 1,
      ease: "slow",
      duration: 1
    })
    .to(
      ".bm-others__item",
      {
        autoAlpha: 1,
        ease: "slow",
        duration: 1
      },
      "<"
    );
});

$(".button").click(function () {
  tl && tl.play();
});

Here  is a fork of your codepen:

See the Pen WNYxmvY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[DanielLav]

Hello! Actually your solution is simple and works.

 

But in my real project, I have about 15 changes to my timeline and the media query is only associated with the appearance of the "close" icon. So it doesn't really suit me.

 

Perhaps you have other ideas how to make my functionality? Sorry for asking a lot of questions, but for me this is important and interesting

[Cassie]

Quote

Why do I need it. The fact is that on my real site the "close" icon appears on mobile devices and I need it to be displayed on devices when resizing and returning back.

This sounds like you may be using matchmedia in JS where you should be using matchmedia in CSS? If the media query is only handling the appearance, that's likely easier to keep as a CSS thing.

Would you be able to explain exactly what you want to see visually at each size? I'm not entirely understanding from the explanation so far.

 

 

[DanielLav]

I want the "close" icon to only appear at a width of 0-767. Now this one works like that, but as soon as I resize to a width of 767+, my "close" icon disappears and no longer appears when I resize to a width of 0-767 again.

 

 

[Rodrigo]

Hi,

 

If you want the button to show and handle some animations in that particular range then, regardless of what you have in your CSS that should work without GSAP to know that there are no issues on that side of the equation, even more reason to keep everything inside the GSAP MatchMedia instance and nothing outside.

 

The example you presented has a button that is visible on every screen width, not just small ones, so it really doesn't match the description you give here:

3 hours ago, DanielLav said:

I want the "close" icon to only appear at a width of 0-767.

 

I updated the codepen example:

See the Pen abQBbGZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[DanielLav]

Good, thank you! It really works. Sorry for not looking at this from the css side. 😅

 

Sometimes such easy solutions are not visible.