emjay Posted October 11, 2021 Share Posted October 11, 2021 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 More sharing options...
Cassie Posted October 11, 2021 Share Posted October 11, 2021 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') } } ); 4 Link to comment Share on other sites More sharing options...
emjay Posted October 12, 2021 Author Share Posted October 12, 2021 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 reset-animation-on-desktop-smol.mp4 Link to comment Share on other sites More sharing options...
emjay Posted October 12, 2021 Author Share Posted October 12, 2021 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. 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 reset-animation-on-desktop-2-smol.mp4 Link to comment Share on other sites More sharing options...
emjay Posted October 12, 2021 Author Share Posted October 12, 2021 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. Do you have another tip for me? See the Pen 6dd272ada7b0cd2dd04563a1f1a3f56c by emjay (@emjay) on CodePen reset-animation-on-desktop-3-smol.mp4 Link to comment Share on other sites More sharing options...
OSUblake Posted October 12, 2021 Share Posted October 12, 2021 We can't fork your pens because they are private, but here's how I do media queries. See the Pen BadyVyM by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
emjay Posted October 12, 2021 Author Share Posted October 12, 2021 Hello @OSUblake, thanks for your response, I will take a look at it. Sorry with the Private Mode of my pens, i made them all public now. Martin Link to comment Share on other sites More sharing options...
emjay Posted October 12, 2021 Author Share Posted October 12, 2021 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 More sharing options...
OSUblake Posted October 12, 2021 Share Posted October 12, 2021 It's fine, or you can just use a fromTo animation. Just another note. Timelines don't have eases, and you don't need to pause an animation if it's reversed. 1 Link to comment Share on other sites More sharing options...
Solution emjay Posted October 12, 2021 Author Solution Share Posted October 12, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now