Learn by example

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

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

1. HTML

Create a clean index.html:

<html>
  <head>

  </head>
  <body>

  </body>
</html>

CSS:

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

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

Assets

Copy & paste the following in the <body /> tag:

<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 graphic tool to create this SVG.

Which renders:

Notice the data-spirit-id attribute on each element. This way Spirit can resolve elements for animation. Although using this attribute is not required, it's highly recommended. Your document structure might change over time, having an id as reference is therefore far more reliable.

When data-spirit-id is not set, the element will be resolved by XPath. For example svg/path[2]. See Getting Started - XPath.

2. Include the runtime

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

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

3. Connect

Now that we have our assets and runtime player in place, open the Spirit desktop app and connect the web page.

  1. Open Spirit desktop app
  2. Click on the Spirit browser icon (in Chrome), yes that little ghost in the corner.

If you're running your page from your local filesystem file:///, make sure to toggle on "Allow access to file URLs"

The desktop app is now successfully connected with your web page.

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 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).

Chrome Devtools - Elements Panel

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

  1. Open Chrome Devtools (Command+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 is enabled in the app, 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.

Once the elements are all there, you can drag and sort them.

See also App - Create Group

5. Edit the animation

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

Add a stroke dash array

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).

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 added 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.

For more information about the using the stroke-dasharray and the stroke-dashoffset, these resources might be useful:

GSAP DrawSVG Plugin

Because the runtime uses GSAP for tweening, a better fit would be using DrawSVG plugin here, but this plugin is for Club Greensock Members only and therefore not suitable for a general example like this.

However, if you are a Club Greensock Member and want to try out the DrawSVG plugin in the app, make sure to add the plugin to you webpage and add the property drawSVG (instead of the strokeDashArray). Play around with different values (for example: 0 50).

See how easy it is to make things move! 🤘

Add property dash offset

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

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 Command+C and Command+C

Recreate the complete animation

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

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

Or simply download the animation here.

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 runtime, head over to the runtime docs section.

8. Result

Our finished index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn By Example - Spirit</title>
  <style>
    path {
      stroke: #50a6eb;
      stroke-width: 60px;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: transparent;
    }
  </style>
</head>
<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>


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

</body>
</html>

See the Pen Learn-by-example - Demo by Inlet (@inlet) on CodePen.

results matching ""

    No results matching ""