Skip to content
Animating Elements Along SVG Paths with Javascript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add more demos Mar 15, 2018
dist Initial commit Mar 8, 2018
images Add more demos Mar 15, 2018
js Add more demos Mar 15, 2018
scss Add more demos Mar 15, 2018
.gitignore Initial commit Mar 8, 2018
LICENSE Initial commit Mar 8, 2018
README.md Add advanced tutorial link Mar 19, 2018
gulpfile.js Initial commit Mar 8, 2018
index.html Initial commit Mar 8, 2018
index2.html Add more demos Mar 15, 2018
index3.html Add more demos Mar 15, 2018
package.json Initial commit Mar 8, 2018

README.md

Path Slider

Sliding elements along SVG paths!

Basic Usage Links

TUTORIAL

DEMO

CODEPEN

Advanced Usage Links

TUTORIAL

Demo Elastic | Demo Images

Codepen Elastic | Codepen Images

Documentation

PathSlider constructor ask for 3 parameters:

  • path: SVG path (or String selector) to slide elements through it
  • items: DOM elements (or String selector) to slide
  • options: Object with options to override defaults

For example:

var options = {startLength: 0};
var mySlider = new PathSlider('.path', '.item', options);

Possible options:

  • startLength (float or 'center'): Length of the path to start positioning the elements
  • activeSeparation (float): Separation among the active item and adjacent items
  • paddingSeparation (float): Padding separation at the beginning and the end of the path
  • duration, delay, easing, elasticity: Refer to anime.js library options
  • stagger (ms): Delay among animations of each item
  • begin (function): Callback function to call immediately before each item animation starts
  • end (function): Callback function to call immediately after each item animation ends
  • beginAll (function): Callback function to call immediately before all the animations starts
  • endAll (function): Callback function to call immediately after all the animations ends
  • blockUntilEnd (boolean): If true (false by default), you need to wait current animation ends to select a new item
  • clickSelection (boolean): If true (default), add listeners for click events in every item to allow selecting them

Callback functions begin and end receive an object with some useful info:

  • index: Index of item
  • node: The DOM node
  • selected: True if item has been selected
  • unselected: True if item has been unselected

Selecting items:

By default, the library add listeners for click events in every item to allow selecting them (clickSelection option). You can also select items using the following functions:

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

For example:

mySlider.selectPrevItem(); // Or any of the following
// mySlider.selectNextItem();
// mySlider.selectItem(0);
You can’t perform that action at this time.