How to reset animated object to default state

[Frunky 0 Likes (Newbie)]

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)

Thanks

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

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

Does reversing the animation do what you want?

 

See the Pen NBxqOM by GreenSock (@GreenSock) on CodePen

 

 

[Frunky 0 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

 

[Frunky 0 Likes (Newbie)]

@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

[Carl 9,066 Likes (Superhero)]

sorry, but it is very difficult to answer performance questions without some way of seeing what you are doing.

Do you have a link to a reduced test?

[Frunky 0 Likes (Newbie)]

Thanks for the reply, @Carl

 

This it the link to our dev

[Dipscom 2,815 Likes (Superhero)]

Hey Frunky!

 

Allow me to butt in here. Animated displacement effect with SVG is not hardware accelerated and not performant at all. If that's the effect you are after, you will want to use Canvas (or a library that uses WebGL).

[PointC 8,599 Likes (Superhero)]

Just for comparison, here's the logo using a displacement map in Pixi.

 

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