Jump to content
Search Community

Replay animation on hover

SirMajig test
Moderator Tag

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

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