Jump to content
Search Community

Interaction by reversing and playing timeline

bluecube test
Moderator Tag

Go to solution Solved by Carl,

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

 

This is part of a bigger animated timeline but I just put the part where am stuck. I'm stuck on how to reverse and play a timeline based on a mouseover event because they keep stacking on top of each other. 

 

As per the codepen example: 

  1. The 'Main Title' staggers in, staggers out and the first div loads (expertise01). 
  2. If you hover over any of the 'Sub - Titles', it reverses the timeline on the currently loaded div and plays the requested div.

Note on mouseout, I'm hoping to have the div stay in place until another mouseover event occurs. 

 

Appreciate the help. 

See the Pen reomor by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Welcome to the GreenSock forums,

 

Thanks so much for providing the demo. Great job!

 

If I understand correctly the trick here is to keep a reference to the "currentAnimation" this way you can reverse it from any subtitle

 

 

 

//at top of script declare variable
var currentAnimation;

$(headTitle).on({
      mouseenter: function() {
        
        if(currentAnimation){
          currentAnimation.reverse();
        }
        
        this.animation.play();
        currentAnimation = this.animation;
      }
    });

http://codepen.io/GreenSock/pen/YqdxeL?editors=0010

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