Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily.
The animations are powered by anime.js.
The demo is kindly sponsored by: Northwestern’s Online Master’s in Information Design and Strategy.
If you would like to sponsor one of our demos, find out more here.
La idea original
The source of inspiration for this kind of effect came from the Dribbble shot Shift Animation by Alexander Saunki:
Since I saw it, I wanted to implement an effect like that for my new personal website, which I recently launched: www.ayudaparamiweb.com.
To achieve the desired effects, I developed a library that I called “Pieces”, since it allows to draw and animate text, images and SVG paths through rectangular pieces. So, without further ado, let’s see how to use this library!
El tiempo en abril
All the detailed documentation about the Pieces library can be found in its Github repository. But anyway, let’s quickly see some essential concepts to be able to start using this library.
Assuming that we want to draw and animate an image, these are the basic elements that make up the scene:
As you can see, the image we want to draw will be our
item, which will be divided into several
pieces, which can also vary in size and position according to the options we define. To see all the possible options I recommend you check out the documentation on Github.
Throughout the tutorial we will explain each piece of code, so you can learn how to implement your own animations using the Pieces library. Let’s start!
La estructura HTML
canvas element to animate things, and buttons to navigate through the slider.
<!-- Pieces Slider --> <div class="pieces-slider"> <!-- Each slide with corresponding image and text --> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/ricardo-gomez-angel-381749.jpg" alt=""> <div class="pieces-slider__text">Ricardo Gomez Angel</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/josh-calabrese-527813.jpg" alt=""> <div class="pieces-slider__text">Josh Calabrese</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/samuel-zeller-103111.jpg" alt=""> <div class="pieces-slider__text">Samuel Zeller</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/sweet-ice-cream-photography-143023.jpg" alt=""> <div class="pieces-slider__text">Sweet Ice Cream</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/sticker-mule-199237.jpg" alt=""> <div class="pieces-slider__text">Sticker Mule</div> </div> <!-- Canvas to draw the pieces --> <canvas class="pieces-slider__canvas"></canvas> <!-- Slider buttons: prev and next --> <button class="pieces-slider__button pieces-slider__button--prev">prev</button> <button class="pieces-slider__button pieces-slider__button--next">next</button> </div>
Styling the slider
As you can see, we have hidden the HTML elements that we defined for our slider (except for the buttons), since we will draw everything in the
Let’s start by defining some variables and getting the slider info from the DOM:
Then we need to define indexes variables to handle all the items we will draw on the canvas:
In addition to building the array of elements, in the previous code block we defined a simple mechanism to call the
initSlider function only when all the images have been loaded. This is very important, since we will not be able to use Pieces to draw an image that is not available.
So, to show and hide the current items we need to call
hideItems functions respectively. We have implemented them as follows:
We are almost done :) We just need to implement a responsive behavior, listening to the
resize event, saving the current window
width, and reinitializing the slider:
We really hope this tutorial has been useful, and that you have found inspiration in these effects!