Jump to content
Search Community

Tweaking GSAP values for mobile - reverse() works unexpectedly

Jaron test
Moderator Tag

Recommended Posts

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

Hey Jaron and welcome to the GreenSock forums!

 

.progress() just changes the location of the playhead. So let's say that you're on desktop and open the nav. The timeline's progress would be 1 and reversed would be false. 

 

Now with the nav still open, resize to mobile. Click the button. With your logic (with the lines that fix it commented out), you change the progress to 0, but reversed is still false, so it will play the timeline again. Does that make sense?

 

The reason why changing reversed to the opposite value works is because if you change the progress to 0 and reversed is true, there's no timeline to play because the playhead is at 0 (and you can't have tweens before the time of 0).

 

An alternative work around to what you have is simply to pause the timeline on mobile:

if( isMediaDesktop() ) {
  toggled === true ? tl.play() : tl.reverse()
} else {
  tl.pause();
  if(toggled === true) {
    tl.progress(1, true)
  } else {
    tl.progress(0, true);
  }
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi Zach,

 

Thanks, and thank you very much for the reply.

 

That makes sense. It's always better to know why something is working so appreciate the help in understanding it.

 

Have a good weekend and thanks again for the help.

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...