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.
PathSlider
LibraryBefore 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.
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.
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.
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
:
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.