yairEO / Pathanimator
Moves a DOM element along an SVG path (or do whatever along a path...)
Stars: ✭ 251
Labels
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
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
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
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
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
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].