Jesper O. Christensen

Cloud Architect @ Brandheroes

Animating a paper shuffle using the Dojo toolkit

2016-05-17 jesper o. christensenJavaScript...

unsplash.com

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.

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.

<div class="business-card bottom">
  <div class="profile">
      <div class="profile-image"></div>
      <h5><b>Jesper O. Christensen</b></h5>
        <p>
          Software Developer<br />
          <b><a href="https://dk.linkedin.com/in/jesper-oddershede-christensen-74608566">Linkedin</a></b><br />
          <b><a href="https://twitter.com/Karnich">Twitter</a></b>
      <p>
  </div>
  <div class="logo">
      <img src="logo.png" class="resize"/>
  </div>
</div>
<div class="business-card top" id="business-card" data-animating="false">
  <div class="profile">
    <div class="profile-image"></div>
    <h5><b>Jesper O. Christensen</b></h5>
    <p>
      Software Developer<br />
      <b><a href="https://dk.linkedin.com/in/jesper-oddershede-christensen-74608566">Linkedin</a></b><br />
      <b><a href="https://twitter.com/Karnich">Twitter</a></b>
    <p>
  </div>
  <div class="logo" id="logo">
    <img src="logo.png" class="resize" />
  </div>
</div>

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:

.bottom, .bottom:before, .bottom:after {
  background-color: white;
  border: 0px solid #ccc;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.1),
                    1px 1px 3px rgba(0,0,0,0.2);
}

.bottom:before, .bottom:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 12px;
  top: 12px;
}

.bottom:after {
  left: 7px;
  top: 7px;
}

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:

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
    function (coreFx, dom, style, on) { ... });

  • 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:

var step1 = coreFx.slideTo({
  node: someDomElement,
  top: 200,
  left: 200,
  units: "px",
  onEnd: function (node) {
    style.set(node, 'z-index', '-10');
  },
  duration: 300
});

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!

require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
  function (coreFx, dom, style, on) {
    var dropButton = dom.byId("business-card");
    var slideDownPos = 120;
    var slideLeftPos = 1000;
    var bottomStackPos = 28;
    var originalPos = 0;

    var step1 = coreFx.slideTo({
      node: dropButton,
      top: slideDownPos,
      left: slideLeftPos,
      units: "px",
      onEnd: function (node) {
        style.set(node, "z-index", "-10");
      },
      duration: 300
    });

    var step2 = coreFx.slideTo({
      node: dropButton,
      top: bottomStackPos,
      left: bottomStackPos,
      units: "px",
      onEnd: function (node) {
        style.set(node, "z-index", "10");
        style.set(node, "top", originalPos);
        style.set(node, "left", originalPos);
        node.setAttribute("data-animating", false);
      },
      duration: 300
    });

    on(dropButton, "click", function () {
      // prevent clicking while its animating
      if (dropButton.getAttribute("data-animating") !== "true") {
          dropButton.setAttribute("data-animating", true);
          coreFx.chain([step1, step2]).play();
      }
    });
  }
);

From the beginning.

  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.
  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.