How To Animate Elements Along SVG Paths with the PathSlider Library

Introduction

The path element of SVG can be used to create innovative animations for the frontend of your website or web application. In this tutorial, we will show you how to set up your HTML, CSS, and JavaScript to to move elements along an SVG path using the PathSlider library. By following the entire tutorial, you will develop sliders that move from one position to another using this library.

Step 1 — Setting Up the PathSlider Library

Before getting into the code to get the slider working, let’s see how we can use the PathSlider library, as well as explore some of its options.

First, our library depends on anime.js, so we’ll need to include it in our project before we 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 some of the options offered by the library a little better, take a look at the following diagram, which shows parts of the SVG path and the names of the illustrated parameters:

This diagram depicts:

• startLength (float or ‘center’): Length of the path to start positioning the elements. This will always be the position of the active item. A selected item will move here, as well as moving all the other items accordingly.
• activeSeparation (float): Separation between the active item and adjacent items.
• paddingSeparation (float): Padding separation at the beginning and the end of the path.
• items: After the selected item gets 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 here can be supplied as options when initializing our slider, thus providing total freedom to customize the slider to our needs. In addition to these there are other options available, which you can consult in the PathSlider Github repository.

Next, let’s write our HTML code.

Step 2 — Creating the HTML Structure

Our HTML code will be 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>

Now that we have our basic structure, let’s style it with CSS.

Step 3 — Adding Styles with CSS

We don’t need any style to get the slider working, but we usually would like to position the items in the center of the path stroke. We’ll also add some other styles to create a modern front-end look.

Here we will concentrate only on 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.

The styling is now complete. Next, let’s initialize the slider with JavaScript.

Step 4 — Initializing the Slider with JavaScript

To initialize our slider, we only need the path and the items. Optionally we can pass an object with options for customization. We therefore can get our slider working as needed with a 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 between items, producing a 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);

In this code snippet, we have commented all the options used, so that you can understand 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). If we want to add more controls to the slider (some kind of pagination, for example, or prev and next buttons), we have some useful functions we can call to select any item:

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

This will give you a slider like the following, where the elements are moved along an SVG path:

Conclusion

In this tutorial, we have developed a basic slider, using a closed SVG path and some options provided by the PathSlider library. You can check the live demo, play with the code on Codepen, or get the full code on Github.