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 element, and in doing so trigger the animation.
↧
