All Projects → yairEO → Pathanimator

yairEO / Pathanimator

Moves a DOM element along an SVG path (or do whatever along a path...)

Projects that are alternatives of or similar to Pathanimator

React Native Svg Animations
SVG Animations wrapper for react-native.
Stars: ✭ 117 (-53.39%)
Mutual labels:  svg, animations
Reanimate
Haskell library for building declarative animations based on SVG graphics
Stars: ✭ 581 (+131.47%)
Mutual labels:  svg, animations
Tourism Demo
Flutter app backed by Redux, shows animations, internationalization (i18n), ClipPath, fonts and others...
Stars: ✭ 232 (-7.57%)
Mutual labels:  animations
Laue
🖖📈 Modern charts for Vue 2.0
Stars: ✭ 245 (-2.39%)
Mutual labels:  svg
Vectorlogozone
3,000+ gorgeous SVG logos, perfect for your README or credits page
Stars: ✭ 239 (-4.78%)
Mutual labels:  svg
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+1011.55%)
Mutual labels:  svg
Python Barcode
㊙️ Create standard barcodes with Python. No external dependencies. 100% Organic Python.
Stars: ✭ 241 (-3.98%)
Mutual labels:  svg
React Svg Inline
DEPRECATED, I recommend you the tool SVGR
Stars: ✭ 230 (-8.37%)
Mutual labels:  svg
Editly
Slick, declarative command line video editing & API
Stars: ✭ 3,162 (+1159.76%)
Mutual labels:  animations
Mapshaper
Tools for editing Shapefile, GeoJSON, TopoJSON and CSV files
Stars: ✭ 2,813 (+1020.72%)
Mutual labels:  svg
Lunasvg
A standalone c++ library to create, animate, manipulate and render SVG files.
Stars: ✭ 243 (-3.19%)
Mutual labels:  svg
Victor
Ruby SVG Image Builder
Stars: ✭ 237 (-5.58%)
Mutual labels:  svg
Svg2pdf.js
A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
Stars: ✭ 231 (-7.97%)
Mutual labels:  svg
Term Sheets
Create animated terminal presentations. Export as SVG, animated GIF, or HTML+CSS
Stars: ✭ 243 (-3.19%)
Mutual labels:  svg
Ember Svg Jar
🍯 Best way to use SVG images in Ember apps
Stars: ✭ 232 (-7.57%)
Mutual labels:  svg
Darklaf
Darklaf - A themeable swing Look and Feel based on Darcula-Laf
Stars: ✭ 249 (-0.8%)
Mutual labels:  svg
React Spinners Css
Amazing collection of React spinners components with pure css
Stars: ✭ 232 (-7.57%)
Mutual labels:  animations
Motion Shapeofview
Explain how to use MotionLayout with ShapeOfView
Stars: ✭ 236 (-5.98%)
Mutual labels:  animations
Quick Picture Viewer
🖼️ Lightweight, versatile desktop image viewer for Windows. The best replacement for the default Windows photo viewer.
Stars: ✭ 237 (-5.58%)
Mutual labels:  svg
Svg Filters
🔮 Fildrop. A set of custom SVG Filters
Stars: ✭ 251 (+0%)
Mutual labels:  svg

Path Animator

Moves a DOM element along an SVG path (or do whatever along a path...)

DEMO PAGE

Basic use example:

var path             = "M150 0 L75 200 L225 200 Z";    // an SVG path
    pathAnimator,
    startFromPercent = 10,  // start from 10% of the path
    stopAtPercent    = 70;  // stop at 70% of the path (which will then call the onDone function callback)


// initiate a new pathAnimator object
pathAnimator = new PathAnimator( path, {
    duration : 4, // seconds that will take going through the whole path
    step     : step,
    easing   : function(t){ return t*(2-t) },
    onDone   : finish(this)
});

pathAnimator.start( startFromPercent, stopAtPercent  );

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle
}

function finish(){
    // do something when animation is done
}

Settings

Name Type Default Info
duration Number undefined (in seconds) the duration of going through the path
step Function undefined a callback function which is called on every frame
onDone Function undefined (optional) a callback function which will be called at the end
reverse Boolean false go back or forward along the path
startPercent Number 0 Where to start on the path, between 0% to 100%
easing Function 1000/60 (optional) mathematical function for easing
fps Number undefined (optional) frames per second
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].