Skip to content

lmgonzalves/path-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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);

About

Animating Elements Along SVG Paths with Javascript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published