How do I slow down the shatter effect?

[f0rfun]

Hi guys,

 

I'm learning low poly + animating a shatter effect. I've put together pieces of code I've found online and am I'm almost there except that on hover, the polys are shattered immediately which isn't quite the natural feel I want... On hoverOut it's working though..

 

I'm using set() on hover and I understand it's immediate.. I've tried chaining to/from or setting timeScale or duration but none of them are working.

 

I want to achieve the same effect on hoverOut where the polygons are shattered slowly instead of instantaneous but on hover instead.

 

And is my code O.K? Any tips on refactoring?

 

Thanks!

See the Pen QWyqpOW by jhwu (@jhwu) on CodePen

[ZachSaucier]

Hey f0rfun and welcome to the GreenSock forums!

 

Two main things:

• The GSAP version that you're using is old. Use GSAP 3 instead! It has a smaller file size, a sleeker API, and a lot of new features.
• When firing animations based on user interaction events, it's almost always best to create the animation(s) beforehand and use control methods to animate them. I talk more extensively about how to do that in my article on animating efficiently (I recommend giving it a thorough read).

Here's how I'd set it up (jQuery free!):

See the Pen jOWGapX?editors=0010 by GreenSock (@GreenSock) on CodePen

[f0rfun]

Hello Zach!

 

I'm so indebted to you for taking time to look through my code, fixed it and to provide a link to your own tutorial. I'll definitely go through it thoroughly to solidify my understanding of animating an SVG.

 

Proud to have guys like you in the community chiming in to help out the newbies.

 

Good stuff.

 

Thanks!