Animating a paper shuffle using the Dojo toolkit.


What will it look like?

To demonstrate animation I’ve created, what looks like a stack of business cards. The animation is demonstrated in the below CodePen. Click the top card to start the animation.

See the Pen Animated paper shuffle with the Dojo toolkit by Bjørn Sørensen (@Crevil) on CodePen.light

The markup and styling

So I’m just gonna walk through the HTML and CSS for making it look like the image above. Let’s start with the business card markup. 

So that’s the markup. You might notice that it looks like 2 pretty much identical  divs and your right. I have 2 because when I wanna animate the top, I need to have a the rest of the stack still laying on the “table”. I have a top and a bottom stack. On the bottom i have some special styling that makes it look like a stack of cards. Let’s have a look at it:

This CSS will create what looks like 2 other cards below my business card. That’s basically the only CSS i wanna emphasize. The rest can be found in the CodePen above if need be.

Loading the Dojo modules we need

Dojo is modulized. So that means we need to load the modules before we can use them. We do this with the require tag like so:

  • dojo/fx – this is the module that will help us with animating.
  • dojo/dom – this module can help us find the dom element we need.
  • dojo/dom-style – this module will help us editing css styling on the go.
  • dojo/on – this module gives us the functionality to add events to elements.
  • dojo/domReady! – this module makes sure that the function doesnt run unless the dom is loaded completely.

Animating with Dojo

So we are gonna build some animation steps and chain them together to make a nice paper shuffle animation. In Dojo we can use the  dojo/fx  module for this. A step could look something like this:

In the above step. I’m going to move the someDomElement to position top: 200, left: 200. the units are pixels and the step is gonna take 300 milliseconds. At the end of the step im gonna set the z-index to -10. That seems pretty simple right? Now let’s make some steps and chain them together!

From the beginning.

  • Step 1 – This is where it happens. This animation moves the business card out to it’s outmost position. At the end of the animation we change the z-index to -10. This is important because if we didn’t do that, the card would just slide back on top of the stack instead of beneath it.
  • Step 2 – We move the card back underneath the stack. Instead of position top: 0 and left: 0. We move it a bit to the left and a bit down. This is so that we hit the bottom of the stack instead of where the top card is positioned. When the animation ends. I set the top and left position to the original position, returns the z-index to 10 and sets the data-animating attribute to false. This basically just resets the whole thing so that you can do it over and over again.

Then we just chain them together with coreFx.chain([step1, step2]).play();

If you want a more smooth animation or want it to do a more circular motion when shuffling, feel free to add in some more steps!

That’s it! For more inspiration check out the Dojo documentation and this animation tutorial.