Comments (4)
put after line 282 the callback this.callback(this);
then the callback is also fired at the end of rewind
from vivus.
Sorry about that, but you're right.
There's no callback when the animation is rewinded, only when it's drawn. I thought the callback would be useful only for when the SVG is drawn. But your point make sense.
I'll try to implement it for the next version, but I want to add a property on the object to check if the SVG is drawn or not (to help the callback). I'm also hesitating to add the callback as property in the option object.
Something like
new Vivus('logo', {}, function (myVivus) {
myVivus.play(myVivus.isDrawn ? -1 : 1);
})
from vivus.
This would give you more controll. But depends on where you wanto go with vivus and how complex it should get.
Btw.: An option for rewinding from start to end instead from end to start could also be nice.
line 322
path.el.style.strokeDashoffset = Math.floor(path.length * (0 - progress));
vs
path.el.style.strokeDashoffset = Math.floor(path.length * (1 - progress));
from vivus.
Now the callback function is called at the end of each animation. And to know if the instance is at the start or end, just check the property currentFrame
(Equal to 0: start, else: end).
from vivus.
Related Issues (20)
- Trigger SVG to draw as soon as you see it (very large SVG) HOT 1
- Include Start delay without Loop HOT 3
- Is vivus deprecated? HOT 1
- daisy-chaining a series of images? HOT 2
- Beginner, unable to use HOT 8
- Support for Play Pause HOT 4
- Vivus MAP Array Empty, no animation rendered. HOT 2
- Problem using stroke based mask using multiple time the same SVG file
- Is there any rewind too?
- [Feature Request] Animate individual paths HOT 2
- [Error Fix]: There is a grammatical error on the index page. HOT 2
- Text is drawing immediately HOT 2
- Is there any option to draw svg on scroll? HOT 1
- No "ease-in-out" timing function? HOT 3
- Move a pencil while drawing ? HOT 1
- Integration with vue 3? HOT 4
- Callback function for when a path is completed? HOT 1
- Animation automatically replay
- Not working for a simple test HOT 2
- Please add Shuffle/Random animation type to Vivus
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vivus.