Create Fully Animated Widgets with Shift.css

By . in Toolkit. Updated on .

Note: Shift.css is now unavailable.

Web animation offers a way to grab people’s attention and draw them further into a website. There are lots of tools out there to create free animations but Shift.css is one of the newest in the bunch.

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.

shift.css homepage

The can show you much better than I can explain in words.

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.

I can’t find any GitHub repo for this project, so you’ll need to download the files directly from the Shift.css website.

The next step is to define a container element with some contents. Class names are important, so every animating element needs to have the class .shift-element applied.

<div id="shift-container">
  <div id="div1" class="shift-element">
    <div id="div2" class="shift-element"></div>
    <div id="div3" class="shift-element"></div>
  </div>
</div>

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.

  1. data-animation: Name of the animation
  2. data-delay: Total delay(in seconds) before the animation starts
  3. 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.

I do wish this library came with more options in JavaScript because it would let developers have so much more control over the placement and features. But for a simple(and free) animation framework, I can’t complain.

Shift.CSS is perfect for newer developers who want to create more complex animation styles without writing verbose code from scratch.

Read Also:  Tuesday.css is The Hottest Animation Library Right Now

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail