Forge Your Own (Animation) Path with These Snippets
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.
Certainly, you can leverage some high-powered JavaScript libraries to create something other-worldly. But you can also use the effects already built into CSS3 to add movement to your website. Either way, the end user doesn’t necessarily need any fancy hardware or browser plugins to view your creation.
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 in which developers are using paths to do more with web animation.
Sign Your Name
The idea of adding an animated signature to something isn’t new – we’ve seen it in television and movies for years. Yet, as we see in this example, it still adds a touch of class. SVG is combined with JavaScript in order to create a very smooth and sharp effect.
Rainbows (with No Unicorns)
Perhaps the best thing about this rainbow-themed heart animation is that it demonstrates how incredibly unique an 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 a whole other level. As for the unicorns, well, we’ll be satisfied without them – this time.
Shattered Dreams
It’s easy to think of animation as a means to put something together. But we can also use it to break stuff! For example, this snippet uses GSAP to add a “shattering” effect to 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, it moves to the center of the path and displays a full-sized image in the background.
Is That Menu Following Me?
Quite often, a path is something that is generated by a designer to control an animation. Here, the user is put in 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
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
This skull animation may be about as beautiful and intricate as you can get. The high-level detail of the SVG image, along with the timing and precision of the animation combine for a mesmerizing effect. Thankfully, you can watch as many times as you like by clicking the included “DRAW AGAIN” button.
The Dark Side of The Animation
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 really 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?
The post Forge Your Own (Animation) Path with These Snippets appeared first on Speckyboy Web Design Magazine.