Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Mathis
    @Mathis_Tailland_twitter
    thanks for help and sorry for my bad english
    maxwellito
    @maxwellito
    @Shuunen thanks! :smile:
    @Mathis_Tailland_twitter how do you try it on chrome? just drag and drop? or use a <object> tag?
    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
    vivus-animation.png
    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
    @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
    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