Signature animation

[dinoiam 0 Likes (Newbie)]

Hello, I'm trying to animate my signature on scroll. I created an SVG with 6 paths, Each one of them contains part of the name. I want them to appear consecutive, one after the other, starting from the first one.
I tried with stagger, but I need to specify the time and the animation looks terrible. Can u help me? 
I'm not an expert with SVG and animation, so maybe I'm approaching wrongly, maybe there is an easier way to do what I want to achieve?

See the Pen rNrGXrd by dinoiam (@dinoiam) on CodePen

[Rodrigo 5,406 Likes (Superhero)]

Hi @dinoiam and welcome to the GreenSock forums!

 

I see a few issues here:

1. The i and the dot are separate paths, hence using stagger adds a weird effect. You should try to combine them into a single path in order to animate them at the same time.
2. You are currently using the default duration (0.5 seconds) and a longer stagger time, so there will be a pause of 0.5 seconds between each path being animated, which is kind of odd.
3. The stagger easing you're using might not be helping too much neither, I'd start by not using any easing function and then add something to the animation instead of the stagger.

Maybe this comes closer to what you're trying to do:

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

 

I added some extra height to the elements before and after the signature and the markers for better debugging.

 

Also take a look at this articles by @PointC about animating handwriting with GSAP:
https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-2/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Finally take a look at the DrawSVG Plugin which should make this super easy:

 

Let us know if you have more questions.

Happy Tweening!

[dinoiam 0 Likes (Newbie)]

@Rodrigo Thank you very much for your help. I combined the svg into a single path and fixed the duration. The result is visible here https://dinoiam.github.io/cisposiamo/. You need to scroll a bit in order to see it. I just notice that on mobile (my old pixel 3) the animations are not so smooth. I'll maybe open a new topic and ask for some hints.

[Cassie 5,385 Likes (Superhero)]

Unfortunately SVG paths can be a little jittery on low end devices - the animation isn't hardware accelerated, unlike properties like transforms and opacity. (Although in SVG land, that's still only in some browsers)

 

There's not a huge amount we can do about that I'm afraid.