SVG Animation Play and Reverse on mouse/touch hold

[alfianridwan]

Hi guys,

 

This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery.

 

I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation.

 

So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state.

 

Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc.

 

Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js

 

Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!)

 

Thanks,

Alfian

 

 

See the Pen by (@) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

You should be able to do exactly what you need with GSAP. You can try all of our premium plugins for free on CodePen:

 

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

 

here is something I whipped together quickly 

 

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

 

In the demo above "tween" could be an elaborate timeline of multiple animations and you would have the same control.

[alfianridwan]

Hi Carl,

 

Thank you so much for the simple yet effective solution. I will be purchasing the DrawSVG plugin then!

[Carl]

Happy to help. Glad it works for you.