Stack Overflow
Stack Overflow

Questions tagged [vivus]

Vivus is a JavaScript library for animating SVGs

Vivus is a lightweight JavaScript library that allows you to animate SVGs, giving them the appearence of being drawn.

Documentation :

44 questions
3
votes
1 answer

How to animate shape or image file along SVG paths with the Vivus js?

I am using vivusjs library to animate SVG, i want to animate an image file or a shape along animated SVG . somthing like as below: White line is an animating SVG path and green pen is my image file. i need it in Vivusjs library.
MHS
  • 881
  • 1
  • 13
  • 30
3
votes
1 answer

Vivus.js with Mean.js not working

I am creating a simple animation with vivus.js, however it is not working. 1st I create the svg and give an id. Then I create a function: function vivus(){ console.log("work") new Vivus('Layer_1', {type : "async/ oneByOne/delayed"}); …
Chinenyem V. Nwadiugwu
  • 33
  • 2
2
votes
2 answers

How to include Vivus Javascript in an Angular 2+ project

I have an angular 6 project and I would like SVG animations. Vivus is a JavaScript class that I would like to inlude. The first step is to obviously run "npm install vivus" inside the project folder. I'm guessing after that I need to put something…
Caleb Grams
  • 273
  • 3
  • 14
2
votes
0 answers

How can achieve an invisible pencil effect with SVG text?

I am trying to make a clean logo animation, invisible pencil style, with a logo text. I am using vivus.js, which is very useful to script svg animations. Using the font "Alex Brush", I want to display progressively some text in SVG, like this…
Billybobbonnet
  • 3,156
  • 4
  • 23
  • 49
2
votes
0 answers

Does vivus.js work with any svg?

i am new at svg animations. And i would like to work with vivus.js. I have set up the testing enviroment. And downloaded a svg from here: https://www.svgimages.com/hand.html I have tryed to animate it but it dont work, but when i replace it with the…
saamii
  • 93
  • 1
  • 2
  • 8
2
votes
1 answer

ReactJS & Vivus SVG Animation

I'm new to reactJS and I'm trying to make my SVG's animated in React and I am having some issues. I got vivus from https://www.npmjs.com/package/vivus import React from "react"; import ReactDOM from "react-dom"; import Vivus from "vivus"; export…
xoomer
  • 311
  • 2
  • 10
  • 22
2
votes
3 answers

vivus.js - How to select SVG by Class

Is there a way to select SVG by Class instead of ID , Like this:
smalinux
  • 1,132
  • 2
  • 13
  • 28
1
vote
1 answer

Unable to animate Font Awesome Icon using Vivus

I'm trying to get a font awesome icon to be drawn onDocumentReady, however I'm having some issues with it. The library that came to my mind is Vivus. There's a library for connecting Font Awesome and Vivus aswell: FontAnimate. I thought easy game,…
MrDikke
  • 121
  • 13
1
vote
1 answer

Animate line in desired direction with Vivus.js

I'm trying to animate this line so it would start from top to bottom, and then turn right to draw itself, with Vivus.js. However, the graphic does not seem to animate and I can't figure out why..anyone has some experience with SVG draw animations…
Smithy
  • 807
  • 5
  • 17
  • 43
1
vote
0 answers

Vivus self play on mobile

on mobile devices the svg vivus animation starts automatically when the page is done loading, ignoring the vivus.play() command that in my case should starts only if triggered by action. that happens on both ios/android but not on ipads
Federico Dolce
  • 11
  • 1
1
vote
2 answers

Vivus.js in Angular 5 Component

I am trying to use this library Vivus.js in Angular 5 and am getting issues from the constructor of Vivus, so I think it's loading the library and using it correctly, I am wondering if anyone could give me some insight as to why its not picking up…
Nicholas Pesa
  • 2,156
  • 2
  • 24
  • 45
1
vote
1 answer

svg animation letter by letter fill vivus.js

I'm aiming for an attempt to make this handwriting look as natural as possible as if written with a pen. I think the best option is filling each letter after they've been written but so far all I have managed to do is filling after the entire…
UpIX
  • 483
  • 1
  • 4
  • 9
1
vote
1 answer

Transition on fill image using SVG

Im trying to achieve a smooth transition effect on image, after the vivus.js making a stroke it should do a smooth transition of image when it appears but its unfortunely not. With colors works great, but cant figure why its not working with…
cebula
  • 13
  • 3
1
vote
1 answer

Vivus JS doesn't seem to animate certain nodes

I'm playing with the Vivus JS library, which is very cool for animating paths like drawing a picture. Now, I have this SVG icon that should animate to a 100% line-width, but it doesn't seem to work. On other icons in my project it works well. See…
Ewinnn
  • 327
  • 3
  • 14
1
vote
2 answers

What does the animation duration in frames mean?

I have been using vivus.js for tiny svg animations for a while now , now this plugin has the following initialization format: new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback); dead simple to use , now my question is about…
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
1
2 3