Sign on the Dotted Line: Finishing Your Animation With Waypoints

In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on the screen. In this tutorial we’ll take things further and use Waypoints to trigger the animation when we choose.

The Problem

Our animated signature isn’t perfect–the writing effect begins when the page loads, even if the SVG is at the bottom of the page, out of sight. Ideally we’d like the signature to animate whenever it first scrolls into view.

For this, we need to use JavaScript and a little help from the Waypoints library. Waypoints will detect when our signature scrolls into view, at which point we’ll add a class to the <svg> element, and in doing so trigger the animation.

8. Add Some Filler Content

To begin with, add a load of paragraphs and some text to pad out the top of the page and push our signature off the viewport. We’ll also add some generic styles to make the whole thing a little easier on the eye:

body {
  padding-top: 20px;
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
  color: #263238;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 1.5em;
}

#signature {
  width: 40%;
  padding: 2em 0;
}

Bonus Points!

I’ve used a brilliant wireframing font called BLOKK Neue–it’s a great stylistic addition to our demo and draws focus to our signature. If you want to, download the font and use it yourself.

p {
  font-family: "BLOKKNeue-Regular", serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 1.5em;
}

For more information on how to use web fonts check out Figuring Out @font-face by Jeremy Loyd.

9. Bring in Waypoints.js

Unusually for me, I’m not going to lean on jQuery. Waypoints 3.0 introduced a completely framework free version, so I’ll be daring and using that. If you prefer jQuery syntax, or already have jQuery hooked into your project for other reasons and just find it easier to use, by all means go with a different Waypoints file and alter the code we write accordingly.

In any case, grab the file, link to it from your HTML document (or within your CodePen JS panel) and sit back with a cup of coffee for five minutes.

Point to the SVG

We need to tell Waypoints about our <svg>, so let’s grab it and assign it to the variable mySignature:

1	var mySignature = document.getElementById('signature');

Now we instantiate the Waypoint class, so add the following snippet to the JS pane in CodePen (or within <script> tags at the bottom of your HTML document if you’re doing things that way).

We have to make sure we pass our mySignature to the element option (so it knows which element it’s watching out for) and making sure the handler option is defined. The handler is where we dictate what happens when the waypoint is triggered.

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        
    }
})

Bottom of the Window

The above code will trigger “something” when the top of our <svg> element hits the top of the window. We need the waypoint to trigger when the bottom of the <svg> hits the bottom of the window, in other words when it’s completely scrolled into view. For this we can use Waypoints’ Offsets. Offsets allow us to specify exactly when we want an element to trigger an action–in our case we want to use: offset: 'bottom-in-view' like this:

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        
    },
    offset: 'bottom-in-view'
})

Handler

Lastly, we need to specify what’s going to happen when the waypoint is triggered. We want a class (animate) to be added to our <svg> and that class will be what we attach our animations to. The animations will therefore only start playing once the class is added. We’ll add mySignature.classList.add('animate') to the handler function, giving us a complete script which looks like this:

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        mySignature.classList.add('animate')
    },
    offset: 'bottom-in-view'
})

10. Using `.animate` in Our CSS

Remember all those rules where we defined the animations? We’re going to get a little more specific. Instead of having:

1	.stroke-I {
2	stroke-dasharray: 80;
3	animation: write1 2s 1 ease-out;
4	}

we’re going to make each one apply only when the animate class has been added to the parent <svg>:

1	.animate .stroke-I {
2	stroke-dasharray: 80;
3	animation: write1 2s 1 ease-out;
4	}

The result should be pretty close, try scrolling down:

11. Opacity

The last remaining detail is that the signature is completely visible by default, then when it scrolls into view there’s a flash when it disappears before being “drawn”. We can work around this by making the <svg> transparent to begin with, then revealing it when the animate class is added.

We’ll do this using opacity: 0; on its default state, then adding opacity: 1; when it’s ready to go:

#signature {
  width: 40%;
  padding: 2em 0;
  opacity: 0;
}

#signature.animate {
  opacity: 1;
}

Conclusion

This has been a great little project for practicing a number of skills! We used inline SVG on a web page, we cleaned it up by stripping away attributes and converting them to CSS properties, we explored well controlled CSS animation and finally made the end result work in a functional way with some help from JavaScript.

It’s a fun end result, but what else could you do with it? For a start the CSS could be made much cleaner by using a preprocessor–have a go at tidying it up. You could also use this technique for logos, testimonials or a call to action. Try it yourself and post your results in the comments!