Jump to content
Search Community

GSAP reverse() not working?

karlshaver test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

My goal for this animation is for the div to slide over when clicked, and then for the timeline to reverse back to start when the back arrow is clicked, and be able to be played again. The play function works, but the reverse does not even though it is set up the same way. What am I doing wrong? I also checked this codepen made by GreenSock:

See the Pen LbezE?editors=001 by GreenSock (@GreenSock) on CodePen

It seems to be set up the same way as my functions. Let me know what I'm missing.

Thanks!

 

My CodePen:

See the Pen bgervY by karlshaver (@karlshaver) on CodePen

Link to comment
Share on other sites

  • Solution

Hi karlshaver :)

 

Just a small fix is necessary. You have your onClick() set to the entire div rather than the <p> so a fight is created to control the timeline. Please make the following change.

//switch this
<div id="infobar" onclick="infoOpen()">
     <p id="explore_text">Explore the Projects</p>
     <i id="detail_exit" class="material-icons" onclick="infoClose()">keyboard_backspace</i>
</div>

// to this
<div id="infobar" >
      <p id="explore_text" onclick="infoOpen()">Explore the Projects</p>
      <i id="detail_exit" class="material-icons" onclick="infoClose()">keyboard_backspace</i>
</div>

That should work correctly for you.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Wow, thanks! That does function more closely to what I'm aiming for. However, now the click area is only the text rather than the exposed portion of the div. Is there a way you would suggest expanding the click area to the full exposed bar that won't cause another conflict? I'm thinking defining the <p> to be larger or making a large span around it. Anyway, thanks a lot for the solution, you guys are great!

Link to comment
Share on other sites

You could leave the click listener on the entire div and then use event.stopPropagation() on the <i> tag to prevent the click from bubbling up to the div. Something like this should work.

$( "#infobar" ).click(function() {
  detailView.play();
});

$( "#detail_exit" ).click(function( event ) {
  event.stopPropagation();
  detailView.reverse(); 
});

Here's a fork of your pen:

See the Pen RKKoYK by PointC (@PointC) on CodePen

 
Here's some more info about propagation:
 
Hopefully that helps.
 
Happy tweening.
:)
Link to comment
Share on other sites

  • 3 years later...

Hey @garex and welcome to the GreenSock forums.

 

The main issue is that you didn't create the tween outside of the event listener and only control it using control methods inside of the event listener. The second time that your event listener is fired, the tween goes from a height of auto to a height of auto and tries to reverse that, which does nothing visually since the start and end values are the same. That's actually one of the most common GSAP errors (I recommend reading the whole post).

 

To fix it, just move the tween outside of the event listener. Here's how I'd set it up:

See the Pen zYrmZVp?editors=0010 by GreenSock (@GreenSock) on CodePen

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