maxwellito/vivus

JavaScript library to make drawing animation on SVG

Mathis

@Mathis_Tailland_twitter

Drag and drop

I figured ou it don't works with angles but if I use 1px round angle it works

bhartvigsen

@bhartvigsen

anyone around? I have an svg from illustrator that won't animate and I was wondering if I could convince someone to take a look and tell me what's off with it

Ginger

@GingerChew

@bhartvigsen make sure it has stroke properties, if it just has fill properties vivus won't know what to do with it. check this out for how to do fill https://github.com/maxwellito/vivus/blob/master/hacks.md

Ginger

@GingerChew

@maxwellito It seems to take a couple of seconds for vivus to realize its done, so the fill-opacity trick in css happens several seconds after the image is done drawing.

Is there anything to be done about that? or is just how that hack works?

maxwellito

@maxwellito

@GingerChew can you provide me a jsfiddle please? maybe your SVG contain some hidden paths

Ginger

@GingerChew

Okay, I'll take a look for that, thanks!

Ginger

@GingerChew

@maxwellito figured it out, the delay was set too high. I thought it was in ms like in the vivus instant instead of frames.

Ginger

@GingerChew

@maxwellito Well, that actually raised more problems than it solved, here's a js fiddle. when I have it all in one html file, I can get it to load vivus properly, linking to the svg in the vivus constructor, but the css fill trick doesn't work. I inserted the svg into the html for you. also having the same issue I mentioned before, taking several seconds to add the finished class.

Ginger

@GingerChew

and here's the js fiddle, lol https://jsfiddle.net/GingerChew/pu0n5097/1/

maxwellito

@maxwellito

Ok, I found out your SVG structure was pretty f**d up (please no offense) but it was based on only 3 paths for such a complex design. I don't know which editor you're using to make your graphics but the output not really friendly with Vivus.

In your SVG every path represent a layer of color instead of one path per element (:a letter or line). Combining all into one path is correct but browsers might struggle to get the total length of the path, which is the crucial information to run Vivus animation.

So I cutted your SVG into smaller pieces : https://jsfiddle.net/pu0n5097/5/

I hope this will help :)

Ginger

@GingerChew

Okay, that makes sense. I tried manually editing the svg in a text editor, but clearly that was the wrong way to go with it, lol! That helps a lot! Thanks so much!

Ginger

@GingerChew

@maxwellito Hey it's me again, i've got the svg loaded up into our website and it doesn't function anymore. Do people report difficulties with larger websites?

The one we're working on is using a couple of javascript packages like, owl.carousel, jquery, datepicker, and Bootstrap, and it's loaded into modx.

the error we're getting is 'Error: Vivus [constructor]: "element" parameter is not related to an existing ID' but the id is the same as in the jsfiddle you posted

anat

@anat

Hello, I want to show the animation depending on network state. do you know how I can use a percentage instead of time parameter ?

anat

@anat

I found the answer

By using animTimingFunction parameter like this :

new Vivus('logoAnimated', {
      duration: 200,
      animTimingFunction: function() { return 0; }
    }, function() {
});

maxwellito

@maxwellito

@GingerChew (sorry about the maaaassive delay, I should check gitter more often) it's probably because your SVG (or DOM) don't exist when you instantiate your Vivus object. Do you have an example? or your page?

mukilan balu

@Mukilanbalu_twitter

can some one show me how to create svg file to be animated with vivus or anime, mine has no strokes it seems

maxwellito

@maxwellito

What graphic editor do you use?

felix

@samytnj_twitter

How can we do for text animation using vivus?

AmyXandra

@AmyXandra

Hello

Paolo Mason

@paagr

hello

Alexey Rubinchyk

@rubinchyk

hello )))

kres

@mkdizajn

hi community,, can anyone confirm is VIVUS kind of free alternative to GSAP?

jiller451

@jiller451

I've added an animated SVG (that I created in Vivus Instant) to my Wordpress page. What Javascript code do I need to add to my site to get it to trigger the animation when in the viewport? I'm new to SVG animations, so any help would be greatly appreciated. Thanks! - J

Sem Gebresilassie

@semosem

Hello Vivus fam

Akhil Remashan

@AkhilRemashan

guys

Maxime GRISOLE

@mgrisole

Hi guys, does anyone know if there is a way to stop a path filling at a certain % ?

cbrom

@CbromCbs_twitter

does anyone know www.vyond.com ?

Nathan Buckley

@nathanbuckley

Hi all. Does anyone have an example of using timing functions or animating individual paths of a dynamically loaded svg. Thank you.

ahhhh, think i can solve my issues with on ready :D

Prime Trust

@primetrust

@mgrisole did you get an answer to your question? I'm curious of doing something similar but based on scroll

irfanDC

@irfanDC

Hi, I am trying to convert svg to animated with the vivus-animated, only have a stroke filling issue, I want to fill the space

irfanDC

@irfanDC

this group should be deactivate if no one active there

GARCIA Guillaume

@guillaumegarcia13

Hi,
Is this possible to use Vivus on pseudo-elements (:before, :after) instead of <i> elements?
I would like to animate font-awesome icons (the way fontanimate does it).
Thanks!

Ahmad Herzallah

@AhmadHerzallah

Hello

How can I SVG fill with animation?

#mySVG * {
  fill-opacity: 0;
  transition: fill-opacity 1s;
}

#mySVG.finished * {
  fill-opacity: 1;
}

the fill animation start before the stroke end

http://bit.ly/33yirS7

Img ^

Rich Goldman

@thujone

Hi, kinda dumb question, but i'm having trouble finding the answer... Does anyone know offhand how to convert font text in an Illustrator file into strokes for SVG? I'm trying to use Vivus Instant, but I'm realizing that the SVG I've created (just my company's name) is composed of font characters.

I just want the animation to draw out each letter of the company name

Rich Goldman

@thujone

i figured out how to change font char to shapes, but i'd like to know how to convert the fill into a stroke, too, i guess

palvisha6

@palvisha6

Hi, i have a question. my code keeps saying "Uncaught ReferenceError: Vivus is not defined" do you know why is it doing that? is something wrong with my paths or js code?

P4tback

@P4tback

hey can anyone help me make animations like this?
https://dribbble.com/shots/15840078-Crypto-traders-conference

Where communities thrive

People

Repo info

Activity