Share Posted May 1, 2020 So, in the Codepen we have a fairly simple animation. On click of the button, we animate the <header> and <nav> elements in, and click it again, we animate them out. It's a toggle button. However, on mobile, we don't want to run the animation but instead want things to appear instantly. We have achieved this using calls to progress(0) or progress(1), however, we've noticed that if you first toggle the animation on desktop, and then go to mobile, and toggle it again, that without the calls to tl.reversed(false) or tl.reversed(true), the animation still tries to animate and doesn't work correctly. Does anybody have any ideas why adding those lines would make it work as I would expect it? What am I missing? To reproduce: On desktop, or anything matching the media query in the Pen (1000px), click the 'Play animation' button, then click it again to hide the animation. Reduce your screen size down to trigger the mobile code, and again, toggle the 'Play animation' button. Note: the code in the Codepen works, you'll need to remove calls to tl.reversed() on lines 18 and 21 to see the issue. Any help would be much appreciated! See the Pen 9dceef6cee3b5ca07c683c775cd5c71c by Numiko (@Numiko) on CodePen Link to comment Share on other sites More sharing options...
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
Already have an account? Sign in here.Sign In Now