Comments (7)
I guess you'e asking something like the easing
option from Walkway
At the moment the library cannot make this kind of effect, but this is something which can be implemented. I'll try to find a way to add this feature without make the code heavier.
from vivus.
Cheers!
On 25/11/2014, at 11:09 pm, maxwellito [email protected] wrote:
I guess you'e asking something like the easing option from Walkway
At the moment the library cannot make this kind of effect, but this is something which can be implemented. I'll try to find a way to add this feature without make the code heavier.
—
Reply to this email directly or view it on GitHub.
from vivus.
Here we are!
I've added two new properties on the option object: animTimingFunction
and pathTimingFunction
. Both are taking a function as value, one is for the global (timeline) animation, the other is for the path (each line) animation.
The function will define the animation, it must accept a number as parameter (between 0 and 1) and return a number (between 0 and 1).
To help, I've set 2 homemade functions Vivus.TIMING_EASE_IN
and Vivus.TIMING_EASE_OUT
. The effect is not perfect, but does the job. They can be directly used in the option object.
new Vivus('my-svg-id', {
type: 'delayed',
duration: 200,
animTimingFunction: Vivus.TIMING_EASE_OUT
});
The code is available on the dev branch. Can you please try it and tell me what you think?
Thanks
from vivus.
Can you please try it and tell me what you think?
Without having looked at the code, I can say that the naming is not very clear. What about easing: Vivus.EASE_OUT
rather than animTimingFunction: Vivus.TIMING_EASE_OUT
?
from vivus.
I understand, but I thought EASE_OUT
would be too 'blurry'. By using the term 'timing', it refer to timing function used in CSS transitions. And about using easing
as option property sounds false to me because the animation could be linear
, step-start
.. or custom. I have to investigate, but I'm happy you mention it, I wasn't happy with the naming.
We have to be careful about that point because it's not something we can change later.
from vivus.
Either we want to look like CSS and should use animationTimingFunction
, or we want to be more specific and use ease
.
For the value itself, being akin to CSS would mean naming it EASE_OUT
.
I think I'd prefer ease: Vivus.ease.OUT
, since the rest of the API does not mimick CSS.
from vivus.
This feature is now implemented in the last release.
from vivus.
Related Issues (20)
- Coordinating draw with scroll HOT 4
- 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
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.