Jump to content
Search Community

How to reset animated object to default state

Frunky 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

I'm forked pen from jonathan

See the Pen NqZPwd by jonathan (@jonathan) on CodePen

So I'm need to create image animation on hover and on mouseleave reset image to default state.

Now animation works well on hover and stopped on mouseleave, but image doesn't reset to default.

So, how I can achieve that?


Ideally, I need the same image hover effect like in this site https://www.juliebonnemoy.com/ (project's images after clients list)



See the Pen VBeLye by Frunky (@Frunky) on CodePen

Link to comment
Share on other sites

@Carl Hi! It's awesome, thank you for that!


It's what I want!

Also, can you help me again, please?

I updated pen.

1) I need to animate only current hover object. I need to do like $(this) in jQuery.

2) I need to animate images with static borders. Now animation works on all image. Could you look this example, please?

Thanks for the quick answer.

Link to comment
Share on other sites

the basic idea is to loop through the svgs, assign each one its own animation. 

When you mouseenter/mouseleave you then play and reverse that item's animation.


As for keeping borders static you probably will need to nest the svg in a parent with overflow:hidden


this should be a good starting point for you


See the Pen bjEXxV?editors=1101 by GreenSock (@GreenSock) on CodePen


  • Like 5
Link to comment
Share on other sites

@Carl You're rock!


thanks for the changed pen, now it's worked correctly!


I thought this changes helps with FPS, but not.

When page is loading site's FPS equal 60, but when I hover to image FPS down to 3-6 FPS - looks strange, it's default problem?
I'm tried to remove all scripts from the site and  leave only tweenmax lib, but it's still.


Sorry for a couple of questions

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