Jump to content


How to approach this animation - drawing an arrow

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,
I'm currently creating an animation that requires me to animate an arrow which looks like its being drawn, the arrow itself has a zig-zag before the arrow head. The arrow SVG is in the codepen link below. 
So to explain in detail, I want the first circle at the bottom left to be filled left to right with the colour white and then the rectangle next to it and then to the next circle and so on, this colour goes all the way to the tip of the arrow head.

I'm going to implement this on page with a black background and I'm planning to fill the arrow in white so it looks like its being drawn very quickly when animated with it being filled white.


I have 2 versions of the arrow, one that is has a single path the other hasn't.


Compound path:

See the Pen MymvpG by anon (@anon) on CodePen


Single Path: (Codepen URL attached to this post)


I'm just really confused on how to approach this problem, do i use clipping path or a mask? Do I use Draw SVG?

See the Pen ZWKJzr by anon (@anon) on CodePen

Link to comment
Share on other sites

okay, so how do I actually create a mask for my svg? What shape should the mask be? I'm really new to the concept of a mask.

Link to comment
Share on other sites

Your mask should be a VERY thick stroke that will go over the white version of the full arrow (lines, circles, and arrowhead).

You will do a DrawSVG tween on the mask so that this stroke grows and reveals the white arrow underneath. 


Chris Gannon has a cool video showing how masks work and how to set them up

  • Like 2
Link to comment
Share on other sites

Hi Acmafali :)


In additional to Carl's great advice, you may also want to consider a 6 mask approach. 3 masks for the circles and 3 for the arrow segments. I only suggest this as a possibility because you mentioned having the circle(s) fill from left to right. A single mask may make the circles fill in a different way than you desire.


You would then add the animation for all 6 masks to the timeline for sequencing. I think a Linear ease will be best or you'll see some odd speed changes. You can always adjust the timescale of the entire timeline for a smooth start and finish.


When making masks, just remember that anything white will show everything below it and anything black will hide everything. In your case, make the mask(s) white and reveal them with the drawSVG plugin and a position change (for the circle masks if you go that direction with this)


The syntax for masks is this:

<mask id="mask1">
<path id="pathToBeAnimated" ....    />

<g id="toBeRevealed" mask="url(#mask1)">
<path  .....   />

Hopefully that helps a bit.


Happy masking.


  • Like 2
Link to comment
Share on other sites

Hey again.


Here's a super simple SVG mask demo that you can use as a reference.


See the Pen KzmXYK by PointC (@PointC) on CodePen



  • Like 1
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.