drawsvgplugin DrawSVG plugin on mousedown/up

[Rocha]

Hi there,

 

I'm trying to animate an SVG using DrawSVG on mouse down/up. On mouse down the animation seems to be working fine but when you release the mouse and try to press it down again the animation doesn't happen.

Instead, these parameters go down to:

stroke-dashoffset: 0;

stroke-dasharray: none;

 

Does anyone know why is this happening?

 

Thank you

See the Pen pogzYJE by rochudo (@rochudo) on CodePen

[ZachSaucier]

Hey Rocha and welcome to the GreenSock forums.

 

Short answer: it's because of your relative tweens. After the first click .fillerpath already has drawSVG: "100%" so when it tries to animate to that value again it has nowhere to animate.

 

The best way to setup animations like this (and most related to user interaction) is to first create the animation(s) that you need and then control them using control methods inside of the event listeners - in this case mouseup and mousedown. I write more extensively on how to set it up to work that way in my article on animating efficiently so I won't repeat myself too much here  

 

Side note: You're using the old syntax for eases and duration. We recommend using the condensed string form for eases and including the duration inside of the vars parameter. For more information check out the GSAP 3 migration guide:

 

 

[Rocha]

Hi Zach

Thanks for your in-depth response. I followed your advice and I updated the old syntax.

 

That article was really helpful. I opted for creating separate functions to then call them inside of the event listeners. Hopefully I'm moving in the right direction?

I updated the Codepen link to reflect those changes:

See the Pen pogzYJE by rochudo (@rochudo) on CodePen

It's almost there I think. Even though I set the animation (mouseup) to be 0.1s long and with no ease it seems to be taking much longer than expect it to reach 0%. Therefore, when you press the mouse down again the svg is still animating down to 0%

[ZachSaucier]

Hey Rocha. Good work updating things to GSAP 3, though I noticed you missed moving one duration to the vars parameter  

 

I don't know if you're understanding the approach that I attempted to outline in that article very well. That's probably my fault for not explaining it well. Here's how I'd set it up:

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

 

Side notes: it's not recommended to mix CSS transitions with GSAP at the same time. That's likely the cause of your slowness. Also you don't need all of those browser prefixes these days (some of them are invalid in any browser anyway) so I simplified your HTML and CSS a good bit.

[Rocha]

I love how I thought I was very close haha Your example shows I definitely wasn't. Thanks a lot for helping out, I understand what you've done there so this a great base to start from as I'm going to be animating more things on this project.

 

You're right about not mixing CSS transitions with GSAP, I will definitely take this into account

 

Cheers