Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Drag and drop
    I figured ou it don't works with angles but if I use 1px round angle it works
    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
    @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
    @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?
    @GingerChew can you provide me a jsfiddle please? maybe your SVG contain some hidden paths
    Okay, I'll take a look for that, thanks!
    @maxwellito figured it out, the delay was set too high. I thought it was in ms like in the vivus instant instead of frames.
    @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.
    and here's the js fiddle, lol https://jsfiddle.net/GingerChew/pu0n5097/1/

    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 :)

    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!
    @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
    Hello, I want to show the animation depending on network state. do you know how I can use a percentage instead of time parameter ?
    I found the answer
    By using animTimingFunction parameter like this :
    new Vivus('logoAnimated', {
          duration: 200,
          animTimingFunction: function() { return 0; }
        }, function() {
    @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
    can some one show me how to create svg file to be animated with vivus or anime, mine has no strokes it seems
    What graphic editor do you use?
    How can we do for text animation using vivus?
    Paolo Mason
    Alexey Rubinchyk
    hello )))
    hi community,, can anyone confirm is VIVUS kind of free alternative to GSAP?
    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
    Hello Vivus fam
    Akhil Remashan
    Maxime GRISOLE
    Hi guys, does anyone know if there is a way to stop a path filling at a certain % ?
    does anyone know www.vyond.com ?
    Nathan Buckley
    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
    @mgrisole did you get an answer to your question? I'm curious of doing something similar but based on scroll
    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
    this group should be deactivate if no one active there
    GARCIA Guillaume
    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).
    Ahmad Herzallah
    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
    Img ^
    Rich Goldman
    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
    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
    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?
    hey can anyone help me make animations like this?