Skip to content

FK04/SVG_Path_Slider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🧭 Path Slider

Path Slider is a lightweight JavaScript utility for animating and sliding DOM elements along SVG paths.
It enables smooth, interactive UI animations commonly used in modern web interfaces, data visualizations, and creative web designs.


🔗 Demos & Tutorials

Basic Usage

Advanced Usage


⚙️ Usage

Constructor

The PathSlider constructor requires three parameters:

new PathSlider(path, items, options)
  • path: SVG path element or selector
  • items: DOM elements or selector to animate
  • options: Configuration object (optional)

Example

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

🧩 Configuration Options

• startLength (number | 'center'): Starting point on the path
• activeSeparation (number): Distance between active and adjacent items
• paddingSeparation (number): Padding at path start and end
• duration, delay, easing, elasticity: Animation options (powered by anime.js)
• stagger (ms): Delay between item animations
• blockUntilEnd (boolean): Prevent selection until animation ends
• clickSelection (boolean): Enable click-based selection (default: true)

Callbacks

• begin, end: Triggered before/after each item animation
• beginAll, endAll: Triggered before/after all animations

Each callback receives:

• index
• node
• selected
• unselected


🎯 Item Selection Methods

You can control item selection programmatically:

mySlider.selectPrevItem();
mySlider.selectNextItem();
mySlider.selectItem(0);

📌 Use Cases

  • Interactive UI components
  • SVG-based animations
  • Data visualization interfaces
  • Creative front-end effects

📄 License

This project is licensed under the MIT License.

About

JavaScript utility for animating and sliding elements along SVG paths using smooth, customizable animations

Topics

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • HTML 43.8%
  • JavaScript 35.9%
  • CSS 10.2%
  • SCSS 10.1%