In some ways, it seems like we’re in the golden age of animation on the web. Mainly because there are so many options for implementing it into our projects.
That brings us to today’s subject of animation paths. Through the use of a path, we can achieve a number of exciting effects. We can tell a story, neatly organize a layout, or simply add some creative flair to our designs.
Let’s explore some of the unique ways developers use paths to do more with web animation.
- Sign Your Name Animation by Lloyd Fenton
- Rainbow Animation (with No Unicorns) by Shaw
- Shattered Dreams by Arsen Zbidniakov
- Slide Along My Path
- Is That Menu Following Me? by lmgonzalves
- Draw Your Own Treasure Map by Craig Roblewsky
- Skull Candy by Ali Klein
- The Dark Side of The Animation by Shaw
- Which Path Will You Choose?
Sign Your Name Animation by Lloyd Fenton
Rainbow Animation (with No Unicorns) by Shaw
Perhaps the best thing about this rainbow-themed heart animation is that it demonstrates how incredibly unique animation can be. It takes this heart-shaped path (cool enough on its own) and pairs it with a gradient effect that kicks things up to another level. As for the unicorns, we’ll be satisfied without them – this time.
Shattered Dreams by Arsen Zbidniakov
It’s easy to think of animation as a means ok linking things together. But we can also use it to break stuff! For example, this snippet uses GSAP to add a “shattering” effect to the text. Even better, hovering over the text allows things to break in super-slow motion.
Slide Along My Path
Sliders aren’t exactly exciting these days. We’ve pretty much seen all they are capable of – or have we? Well, here’s something different. This slider lays out several image thumbnails along a wavy path. Click a thumbnail, and it moves to the center of the path and displays a full-sized image in the background.
Is That Menu Following Me? by lmgonzalves
Quite often, a path is generated by a designer to control an animation. Here, the user has control. As you move your mouse cursor up and down, a hamburger menu follows along the left sidebar. This just goes to show that paths can be used for function as well as form.
Draw Your Own Treasure Map by Craig Roblewsky
Dashed lines make for simple, easy-to-understand animation. And this demonstration of the GSAP DrawSVG plugin offers a look at how to implement some of the more common uses for this technique. Yet, it also can serve as a springboard for doing even more.
Skull Candy by Ali Klein
This skull animation may be about as beautiful and intricate as you can get. The high-level detail of the SVG image and the animation’s timing and precision combine for a mesmerizing effect. You can watch as many times as you like by clicking the included “DRAW AGAIN” button.
The Dark Side of The Animation by Shaw
This full-screen prismatic effect could make for a wonderful background (but only if Pink Floyd doesn’t mind). It uses Lengthy, which makes it easier to create SVG-based animations that use CSS variables. The combination of different line drawing techniques is used to create the far-out light show. Shine on, you crazy diamond.
Which Path Will You Choose?
By themselves, animation paths may not be all that amazing. What they provide, however, is a way to bring a little order to the chaos (or the opposite, if you so desire) of movement on your site.
The snippets in this collection are just the tip of the iceberg in terms of capabilities. As a designer, you have the power to forge your own unique animation path. Where will it lead?