Jump to content


Replay animation on hover

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

Hey, i cant seem to find a way or an example of how to replay an animation like this one, any help would be highly appreciated :)

Heres a link to codepen of the animation i want to restart on hover: 

See the Pen QwmdBL by acronamy (@acronamy) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Nice animation, good job!!


Your question is a little vague though, because you don't mention the part of the animation you'd like to repeat. My guess is the typewriter bar going left/right and the paper going forward as more elements are typed-in.


My recommendation would be to create a TweenMax instance for the bar going left/right with a repeat:-1 and yoyo:true to loop it and a timeline for the paper going forward and the characters appearing in the paper. You can also add the bar's TweenMax instance at the start of the paper's timeline for better control.


A very basic repeat option is use jquery's mouseenter event or the hover method to handle the mouse over/out.


I forked your codepen and created a very simple mouseenter event to repeat a timeline:


See the Pen gbdVqK by rhernando (@rhernando) on CodePen

  • Like 2
Link to comment
Share on other sites

Wow really nice, Thanks for the help, i really apreciate it ! :)

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.