Jump to content
Search Community

how to properly reset inline styles on breakpoint match but keep animation working when going back

emjay test
Moderator Tag

Go to solution Solved by emjay,

Recommended Posts

Hi,

 

i have created the following Pen to discuss a little problem I have right now.

 

I want to animate an notice box via gsap at resolutions below 800px. With larger viewports the box should not be animated at all, but simply be visible. If I load the page with a viewport larger than 799px then the box is visible and everything is fine. If I load the page with a viewport smaller than 800px the box is not visible and the gsap animation works fine.

 

So far so good.

 

But if I now start with a resolution < 800px and then drag the viewport larger, the box is no longer visible from 800px. This is caused by the inline styles added by gsap.

 

How can I remove them on the desktop without the animation not working mobile anymore? 

 

I have tried various things, but I can't get a correct result with any of them.

noticeAnimation.pause(0);
gsap.set('.notice', {clearProps:"all"});
document.querySelector(".notice").removeAttribute('style');

 

I hope someone has a tip for me how to get it working. :) 

See the Pen dc060a9f90f0ad61c2f5dfbd92faff3a by emjay (@emjay) on CodePen

Link to comment
Share on other sites

An option for this case could be using a media query listener and clearProps?

(I can't fork your pen I'm afraid. Apologies for the snippet instead)

 

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

addMQListener(window.matchMedia("(min-width:800px)"),
  event => {
    if (event.matches) {
      console.log('not smol')
        
      gsap.set(".notice", {
         clearProps:"all"
      });
        
    } else {
      console.log('smol')
    }
  }
);

 

  • Like 4
Link to comment
Share on other sites

Hi Cassie,

 

thanks for your solution, I added it here:

See the Pen fb1a4f84e6a6cada4aa2d006fd2e3340 by emjay (@emjay) on CodePen

 

But it doesn't always seem to work. Take a quick look at the following video.

If Im going from desktop to mobile and again desktop to mobile, the button doesn't work anymore.

 

Thanks, Martin

Link to comment
Share on other sites

Hello Cassie,

 

I have reworked my pen and used your media query listener. I also created the animation and the click event of the button outside of it, because otherwise it was registered again with every match. You can see this nicely in my last video, how the animation then runs multiple times. :D

 

See the Pen 746ffb6ec9b52f5a7bc50ade36552449 by emjay (@emjay) on CodePen

 

Now the change from Desktop to mobile works great, also multiple times. The inline stylings are removed on desktop and the box is visible again.

 

But, now I have another problem. On initial load the box is not visible on the desktop, only when I was once in the mobile viewport and then switch back to the desktop. (please see the attached video)

 

I guess this happens because clearprops is then triggered and removes the inline stylings. Now that I'm writing these lines, I think an immediateRender = false might help me.

 

I'll try that. 


Martin

Link to comment
Share on other sites

Hello Cassie,

 

I have now added immediateRender and everything looks fine on the initial load to the page, but now the animation in the mobile viewport is broken. I have the feeling we are on the right track. :D Do you have another tip for me?

 

See the Pen 6dd272ada7b0cd2dd04563a1f1a3f56c by emjay (@emjay) on CodePen

 

 

Link to comment
Share on other sites

Hello @OSUblake,

 

I used your approach to change my JS code:

 

See the Pen yLoyQvv by emjay (@emjay) on CodePen

 

There was a difference in your animation to mine. I'm using from so I had the same problem as in my pens above, that after coming from mobile to desktop, the notice box was hidden because of the inline styles.

 

So I had to use

            gsap.set(".notice", {clearProps:"all"});

in my Js Code on line 11.

 

With this line it works good I think. But is this a good approach? 

 

Thanks,

Martin

 

Link to comment
Share on other sites

  • Solution

Hello @OSUblake,

 

Quote

Just another note. Timelines don't have eases

Ah thanks, I wrapped it with defaults: {} now

 

Quote

 and you don't need to pause an animation if it's reversed. 

Good to know. :)

 

For future readers of this thread, I created a new fork with your input and suggestions:

See the Pen yLoyQvv by emjay (@emjay) on CodePen

 

So Thanks for helping me out. :) Also Thanks @Cassie

Martin

  • Like 1
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...