Editor’s note: For a newer, updated version of this post, check it out here. Since the introduction of…Read more
It’s a free open source framework made for creating dynamic animations within any container. And these animations aren’t locked into one sequence. You can actually build custom animations for each element in the block and apply these in a certain order.
One thing you’ll notice is that each element inside the container is a separate HTML element. Whether it’s an SVG or an image or whatever, you can animate everything separately to create your own custom animation effect.
The library comes with two files, a .css and .js library, and both need to be added to your document head.
Along with these classes, you can also add HTML5 data attributes to define how the animation works. Right now there are only three but they should be enough to customize a full animation effect.
data-animation: Name of the animation
data-delay: Total delay(in seconds) before the animation starts
data-duration: Total length(in seconds) of the animation
The animation name needs to be a predefined animation created for the Shift library. Right now there are 15 animation names to choose from. You can see them listed at the bottom of the Shift.css homepage.
Just copy/paste whatever you want into the animation name setting and you should be good to go! For example, if I wanted to use the exit fade animation I’d add data-animation="shift_exitFade" as a data attribute to whatever element should animate that way. Easy peasy.
Shift.css is perfect for newer developers who want to create more complex animation styles without writing verbose code from scratch.