Jump to content
Search Community

Signature animation

dinoiam test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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:




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


Let us know if you have more questions.

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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.

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.
  • Create New...