JSFeeds: scotch.io - Animating Elements Along SVG Paths: Introducing PathSlider

Tuesday, 13 March, 2018 UTC

Animating Elements Along SVG Paths: Introducing PathSlider

Summary

One of the elements that attracts me most of SVG is the path element. If you follow my tutorials you probably have noticed it :)

And we can do so many things with the SVG paths, that I never tire of experimenting with them, always trying to use them to create attractive and original experiences in the front-end of our websites or applications.

This time we will show you how to move elements along an SVG path with almost no effort! For that we have created a small library that allows you to achieve effects such as the following:

If you follow the entire tutorial, you will see how easy it is to develop sliders where elements move from one position to another using our library. We've started!

Introducing a new library: PathSlider

Before getting into the code to get the slider working, let's see how we can use the PathSlider library, as well as some options it offers.

First, our library depends on anime.js, so we'll need to include it in our project before you we use start using PathSlider. In addition there are some other small requirements that must be taken into account in the HTML and CSS code so that everything works correctly, but we will be seeing them as we develop our slider.

To understand a little better some of the options offered by the library, we invite you to see the following image, as well as a description of each element below:

startLength (float or 'center'): Length of the path to start positioning the elements. This will be the position for the active item always. A selected item will be moved here, also moving all the other items accordingly.
activeSeparation (float): Separation among the active item and adjacent items.
paddingSeparation (float): Padding separation at the beginning and the end of the path.
items: After the selected item get positioned, all the other items will be positioned at the same distance from each other, given the remaining space.

Except items, all the properties described can be supplied as options when initializing our slider, thus providing total freedom to customize our slider to our needs. In addition to these there are other options available, which you can consult in the Github repository.

And now we're ready to see some code!

HTML Structure

Our HTML code will be pretty simple, just a container (.path-slider), the SVG path to slide the items through it, and the items. It's important to note that the SVG path and the items should be inside the same container, so we can avoid issues with positioning.

<!-- Path Slider Container -->
<div class="path-slider">
    <!-- SVG path to slide the items -->
    <svg width="460px" height="310px" viewBox="0 0 460 310">
        <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path>
    </svg>
    <!-- Slider items -->
    <a href="#chat" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div>
        <div class="item__title"><h2>Chat</h2></div>
    </a>
    <a href="#alarmclock" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div>
        <div class="item__title"><h2>Alarm clock</h2></div>
    </a>
    <a href="#camera" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div>
        <div class="item__title"><h2>Camera</h2></div>
    </a>
    <a href="#envelope" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div>
        <div class="item__title"><h2>Envelope</h2></div>
    </a>
    <a href="#lightbulb" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div>
        <div class="item__title"><h2>Light bulb</h2></div>
    </a>
</div>

Adding Needed Styles

We don't need any style at all to get the slider working, but we usually would like to position the items in the center of the path stroke. And of course we'll add some other styles pieces to make it looks great. For the sake of clarity, let's see only the main parts:

// Circle width and height
$circle-width: 74px;
$circle-height: 74px;

// Styles for slider items, positioning them absolutely, in the top left corner of the container
// Also centering them (see negative values for `left` and `top`)
// They will be positioned along the SVG path later with Javascript
.path-slider__item {
  position: absolute;        // Get items out of the flow, and let the library set the correct position
  left: - $circle-width / 2; // Half of the width, for centering purpose
  top: - $circle-height / 2; // Half of the height, for centering purpose
}

// Styles for the item circle (icon container)
.item__circle {
  width: $circle-width;    // Desired width
  height: $circle-height;  // Desired height
}

// Styles for the selected item
.path-slider__current-item {

  .item__circle {
    background-color: #4DA169; // Change circle background-color for selected item
    transform: scale(1.5);     // Scale up circle for selected item
  }
}

As always, you can check the full code in the Github repository.

Initializing the Slider

To initialize our slider, we only need the path and the items. Optionally we can pass an object with options for customization. So, we can get our slider working as needed with a simple piece of code like this:

// Setting up the options
var options = {
    startLength: 0, // start positioning the slider items at the beginning of the SVG path
    duration: 3000, // animation duration (used by anime.js)
    stagger: 15, // incrementally delays among items, producing an staggering effect
    easing: 'easeOutElastic', // easing function (used by anime.js)
    elasticity: 600, // elasticity factor (used by anime.js)
    rotate: true // This indicates that items should be rotated properly to match the SVG path curve
};

// Initialize the slider using our SVG path, items, and options
new PathSlider('.path-slider__path', '.path-slider__item', options);

Just that! Working as expected :)

As you can see, we have commented all the options used, so it is easy to unsderstand what is the meaning of each one.

The library will initialize click events for each item in the slider, so if we click any of them, it will be selected (animated to the main position). Besides, if we want to add more controls to the slider (some kind of pagination, or prev and next buttons), we have some useful functions we can call to select any item:

selectPrevItem(): Select the prev item.
selectNextItem(): Select the next item.
selectItem(index): Select any item using the corresponding index.

You can check the detailed documentation about all the possible options, as well as the rest of the functions of the library in the Github repository.

Conclusion

And that is all needed to get an attractive slider like following, where the elements are moved along an SVG path:

You can check the live demo, play with the code on Codepen, or get the full code on Github.

This time we have developed a basic slider, using a closed SVG path and some options provided by our library. But this is not the only thing we can do. In a next tutorial we will see how to develop sliders a little more advanced and colorful, also using other options provided by the library.

We really hope you have enjoyed the tutorial and that it has been useful!

... more @ scotch.io

scotch.io