Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Animation Play and Reverse on mouse/touch hold

Recommended Posts

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!)






See the Pen by (@) on CodePen

Link to comment
Share on other sites

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.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hi Carl,


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

  • Like 2
Link to comment
Share on other sites

Happy to help. Glad it works for you.

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.