Animated Menu Icon

Let's recreate a simple animation from scratch using Spirit.

Animated Menu Icon

This example is based on this codrops article by Luis Manuel.

1. HTML

1. HTML

Create a clean index.html

<html>
  <head>

  </head>
  <body>

  </body>
</html>

CSS

We want all path elements to render as strokes. Copy and paste the following in <head>:

<style>
  path {
    stroke: #50a6eb;
    stroke-width: 60px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
</style>

Elements

Copy and paste the following in <body>:

<div class="animations">
  <svg viewBox="0 0 1000 1000" width="500px" height="500px">
    <path
      data-spirit-id="path-a"
      d="M 300 400 L 700 400 C 900 400 900 750 600 850
         A 400 400 0 0 1 200 200 L 800 800" />
    <path
      data-spirit-id="path-b"
      d="M 300 500 L 700 500" />
    <path
      data-spirit-id="path-c"
      d="M 700 600 L 300 600 C 100 600 100 200 400 150
         A 400 380 0 1 1 200 800 L 800 200" />
  </svg>
</div>

You can use any vector tool to create this SVG

This is what the SVG looks like:

SVG Output

Notice the data-spirit-id attribute on each element. This way Spirit can resolve the elements for animation.

Although using the data-spirit-id attribute is not required, it's highly recommended, see Docs

2. Add the Spirit web player

2. Add the Spirit web player

Include the development build, so we don't miss out on all the nice warnings for common mistakes. Add this just before the closing </body> tag:

<script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>
3. Connect

3. Connect

Now that we have our assets and the Web Player in place, open Spirit Studio and connect the web page.

  1. Open Spirit Studio
  2. Click on the Spirit browser icon (in Chrome)
Connect

If you're opening the html from your filesystem, make sure to toggle on Allow access to file URLs

Spirit Studio is now successfully connected with your web page.

4. Create a new group

4. Create a new group

Create a new animation Group. Give it a descriptive name, in this case hamburger and add the three path elements that together form the animation.

path-a
path-b
path-c
Select the elements

Select the elements

One way to add elements to your group is to point and click in your browser, but sometimes you can't select the desired element. Especially in this case where the path elements stacks on top of each other (overlapping).

Luckily, we can use the Chrome Devtools - Elements Panel to select the correct element:

  1. Open Chrome Devtools CMD+Option+I, this will open devtools in Elements tab by default.
  2. On the right, click on tab Spirit
  3. If + Select element(s) from webpage in Spirit Studio is enabled, you'll see a button here to add the selected element.
  4. Click on this button to add the element, the element should appear in the app.
Keyframing

Keyframing

Click on the created group. A new window will launch where you can go nuts animating the selected elements for this group.

Add Stroke dasharray

Now, let's add the stroke dash array property for path-a. Click on the + icon on the right of the element label (the + icon will appear on rollover).

Select Stroke Dasharray

You can add any property. The dropdown is just a list of commonly used properties. Once added, you can edit the property name later on.

Change the value

You can drag the number up and down to change the value and see the reflected changes on your web page immediately. Clicking on the number changes the number to an input field.

The property strokeDasharray is a CSS property and can have space-separated number values.

As you can see, a keyframe is automatically added at the current ticker position (at 0s).

Why using dash array here?

With the dash array we can create line segments from a path element, which we can animate over time. We can recreate the complete animation with this property together with the property strokeDashoffset.

Here are some useful resources regarding stroke animation:

  1. https://css-tricks.com/svg-line-animation-works
  2. https://css-tricks.com/almanac/properties/s/stroke-dasharray

DrawSVG

As you might have noticed, finding the correct values for the dashes is quite hard. Luckily there's a plugin that makes animating strokes a lot easier.

Connect

You'll need to have a GreenSock license in order to use this bonus plugin.

You can use drawSVG directly in Spirit Studio ✨

Add Stroke dashoffset

With this property we can move the created segments along the path.

Offsets

Add the following values on time 0s:

strokeDasharray:  2901.57, 2981.57, 240
strokeDashoffset: 5803.15

Now move the ticker to some point in time, let's say 0.25s and click on the + icon (left from element label) for each property to create a keyframe.

There are multiple ways to create a keyframe:

  1. Simply editing the value
  2. Clicking the plus icon (like above), creates keyframe with the current value
  3. Copy/paste by dragging a frame (hold Option drag and drop).
  4. Copy/paste keyframe CMD+C and CMD+V
Animation data

Animation data

Here are the values to recreate the animation:

path-a:

  0s:
    strokeDashArray:  2901.57, 2981.57, 240
    strokeDashOffset: 5803.15

  1s:
    strokeDashArray:  2901.57, 5258.15, 240

path-b:

  0s:
    strokeDashArray:  400, 480, 240
    strokeDashoffset: 800

  0.25s:
    strokeDashArray:  400, 480, 240

  1s:
    strokeDashArray:  400, 600, 0

path-c:

  0s:
    strokeDashArray:  3496.56, 3576.56, 240
    strokeDashoffset: 6993.11

  1s:
    strokeDashArray:  3496.56, 6448.11, 240
6. Export

6. Export

Once you're done, you can export the animation (copy data to clipboard or save to file):

Save

Or simply download the animation data here.

7. Embed the animation on your web page

7. Embed the animation on your web page

Copy the following before the </body> closing tag:

<script>
  spirit.loadAnimation({
    loop: true,
    yoyo: true,
    path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/hamburger.json'
  })
</script>

Refresh your browser, you should see the animation playing smoothly.

For more info about the Web Player, head over to the web player docs.

Open in Codepen

  • Spirit
  • Support
  • Terms