Elastic line w/ <animate> svg to CSS & GSAP

[Perdixo]

Hello guys,

 

So i'm learning svg path manipulation. At first, i wanted to create a line that becomes "elastic" on hover. I've used the `<animate>` attribute. You can see a simple demo here : https://jsfiddle.net/7tL5osr0/2/

 

But i've seen it's poorly supported, and i prefer to have more control. So i've tried to convert this into some css animation. The main issue was that the animation stopped when when you stop hovering. So i've added a little bit of javascript to add / remove and `.animated` class on the line path element to allow the animation to finish even when the mouse isn't hovering it anymore. Here is a demo : https://jsfiddle.net/o64aymt8/1/

 

Now my issue and questions are multiples :

- The animation isn't really reactive, for example if you hover too quickly over the line the animation doesn't work

- I wonder how i could animate the same thing using GSAP? Animate "path d" etc. Is it possible?

- If using GSAP, how can i improve the "reactivity" on the animation? Can i launch it again if for example the user hover 3 times in a row? Or make it directional?

 

I know that's a lot of questions, but i'm still learning / reading the docs and for now i have no clue how to start..

 

Thanks a lot!

See the Pen by o64aymt8 (@o64aymt8) on CodePen

[ZachSaucier]

Hey Perdixo.

 

9 minutes ago, Perdixo said:

- The animation isn't really reactive

Interaction is impossible with just native SMIL animation or CSS. Animating SVG with JS (especially with GSAP) is much better supported and allows for significantly more interactivity.

 

9 minutes ago, Perdixo said:

I wonder how i could animate the same thing using GSAP? Animate "path d" etc. Is it possible?

It's definitely possible! How to do so depends on exactly what you're going for. This post may be helpful to your understanding of how exactly GSAP can help with SVG animation:

 

I think this thread would really interest you as it's very similar to your question: 

On a similar note, our CustomWiggle and CustomBounce functionality may interest you as well:

 

Let us know if we can help with anything else.

[Perdixo]

Wow thanks @ZachSaucier, that's exactly what i was looking for!