Comments (9)
Ewwww... I thought I fixed it, and I actually did, but I should make it better :-S
I put it in my list.
For now, what you can do add the attribute selfDestroy
with the value true
.
So your code would look like
new Vivus('Layer_2', {
type: 'async',
duration: 50,
selfDestroy: true
}, function () {
console.log('animation done');
});
The reason is, by using selfDestroy
it remove all stroke-dasharray
and stroke-dashoffset
attribute from all path elements in the SVG.
Hope it helps :)
from vivus.
Thanks! That worked for me.
I still don't understand why the final values of stroke-dasharray don't work as expected, but I guess since this whole technique is a clever workaround we can't expect too much :)
from vivus.
Hi @maxwellito ,
your solution does not help when using:
type: 'delayed',
duration: 200,
pathTimingFunction: Vivus.EASE_OUT,
animTimingFunction: Vivus.EASE_OUT,
Can you give another fix please?
from vivus.
from vivus.
Please take a look at it by following this link http://demo.themeuniverse.net/pear/demo-8/ See animated triangle at the bottom of the page above
Would you like to order a project?
text.
from vivus.
I tested
selfDestroy: true
and removed it as it does not help. It helps to to join the triangles lines but it looks not smooth, lines join immediately without animation.
from vivus.
Ok, I found out why. I need to fix a little problem for SVG with 1 path. For now just use this options object:
{
type: 'oneByOne', // << that's the fix
duration: 200,
pathTimingFunction: Vivus.EASE_OUT,
//animTimingFunction: Vivus.EASE_OUT,
start: 'manual',
selfDestroy: true
}
But personal advice, avoid using pathTimingFunction
and animTimingFunction
on such a single path SVG. You just double the ease.
from vivus.
Animation still looks not smooth for me. Is it possible to fix it without using
selfDestroy: true
?
from vivus.
The end will never look smooth.
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.