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.
Questions tagged [vivus]
44 questions
1
vote
1 answer
Make a dashed path in Illustrator, each dash it's own path
I'm trying to create a path animation using an svg and a jQuery plugin called Vivus that helps create animated svgs. The problem I'm having is that my path is dashed and since it's only one path, when the script is ran, it connects it in a straight…
Buzzer
- 51
- 8
1
vote
0 answers
Animating SVG using vivus - "Cannot Read property 'length'"
So I am just trying to give a basic idea of what I want to develop for a friend where the letter "M" (his logo) gets drawn out like its on a whiteboard.
I am trying to use Vivus to animate the SVG.
MARKUR |…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Sep 23 '15 at 03:45">asked Sep 23 '15 at 03:45</time>
<a href="../../users/2809411/lewis-menelaws" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2809411.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Lewis Menelaws" />
</a>
<div class="s-user-card--info">
<a href="../../users/2809411/lewis-menelaws" class="s-user-card--link">Lewis Menelaws</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">1,186</li>
<li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li>
<li class="s-award-bling s-award-bling__silver" title="20 silver badges">20</li>
<li class="s-award-bling s-award-bling__bronze" title="42 bronze badges">42</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-30177938">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/30177938/vivus-js-script-won-t-execute-in-wordpress" class="question-hyperlink">Vivus.js Script won't execute in WordPress</a></h3>
<div class="excerpt">I'm trying to use the Vivus.js script in wordpress to animate my svg logo drawing. It is loading the js file but in the error console I'm getting: SyntaxError: Unexpected token '<' referencing the first line of the virus.js file.
Here is my script…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/wordpress" class="post-tag grid--cell" title="show questions tagged 'wordpress'" rel="tag">wordpress</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 11 '15 at 21:27">asked May 11 '15 at 21:27</time>
<a href="../../users/955923/brian-barrus" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/955923.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Brian Barrus" />
</a>
<div class="s-user-card--info">
<a href="../../users/955923/brian-barrus" class="s-user-card--link">Brian Barrus</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">385</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="6 silver badges">6</li>
<li class="s-award-bling s-award-bling__bronze" title="17 bronze badges">17</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-76518747">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/76518747/create-react-app-vivus-error-in-nested-url-routes" class="question-hyperlink">create-react-app : Vivus error in nested url routes</a></h3>
<div class="excerpt">On the React project I'm currently working on I am using Vivus to animate svg images and so far it is working on all my pages. This changed once I added a nested url routes...
Vivus works ...
http://localhost:3000/market-applications
Vivus doesn't…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/react-router-dom" class="post-tag grid--cell" title="show questions tagged 'react-router-dom'" rel="tag">react-router-dom</a>
<a href="../../questions/tagged/create-react-app" class="post-tag grid--cell" title="show questions tagged 'create-react-app'" rel="tag">create-react-app</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 20 '23 at 22:29">asked Jun 20 '23 at 22:29</time>
<a href="../../users/13794905/kylenocompile" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/13794905.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="KyleNoCompile" />
</a>
<div class="s-user-card--info">
<a href="../../users/13794905/kylenocompile" class="s-user-card--link">KyleNoCompile</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">33</li>
<li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-75379999">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/75379999/using-nprogress-with-vivus-to-display-animated-svg-while-page-is-loading-in-my" class="question-hyperlink">Using nprogress with Vivus to Display Animated SVG while page is loading in my nextjs app</a></h3>
<div class="excerpt">I have a nextjs Application
I'm using nprogress (https://www.npmjs.com/package/nprogress) to display a SVG icon when the page is loading.
I have added this code to my _app.js file.
Router.events.on('routeChangeStart', () => {
…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
<a href="../../questions/tagged/vue-nprogress" class="post-tag grid--cell" title="show questions tagged 'vue-nprogress'" rel="tag">vue-nprogress</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 07 '23 at 23:26">asked Feb 07 '23 at 23:26</time>
<a href="../../users/2537315/ayo-adesina" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2537315.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ayo Adesina" />
</a>
<div class="s-user-card--info">
<a href="../../users/2537315/ayo-adesina" class="s-user-card--link">Ayo Adesina</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">2,231</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="37 silver badges">37</li>
<li class="s-award-bling s-award-bling__bronze" title="71 bronze badges">71</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-74206585">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/74206585/vivus-js-uncaught-error-when-using-simple-html-doms" class="question-hyperlink">Vivus.js: Uncaught error when using simple HTML DOMS</a></h3>
<div class="excerpt">I cant figure out why the first line of code works but not the second. They look equivalent if you ask me.
First code works perfect:
<body>
<svg id='animation' width="58" height="47" viewBox="0 0 58 47" fill="none"…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/dom" class="post-tag grid--cell" title="show questions tagged 'dom'" rel="tag">dom</a>
<a href="../../questions/tagged/onload" class="post-tag grid--cell" title="show questions tagged 'onload'" rel="tag">onload</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Oct 26 '22 at 10:53">asked Oct 26 '22 at 10:53</time>
<a href="../../users/19896065/sebastian-johansson" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/19896065.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sebastian Johansson" />
</a>
<div class="s-user-card--info">
<a href="../../users/19896065/sebastian-johansson" class="s-user-card--link">Sebastian Johansson</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">27</li>
<li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-69764563">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/69764563/unable-to-pause-an-animated-svg" class="question-hyperlink">Unable to Pause an animated SVG</a></h3>
<div class="excerpt">I created an animated SVG using vivus instant ,added a button to pause but unable to get pause.
https://jsfiddle.net/zs0vgxya
function f() {
document.getElementById("svg8").pauseAnimations()
}
</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Oct 29 '21 at 06:31">asked Oct 29 '21 at 06:31</time>
<a href="../../users/2643005/kishu" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2643005.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="kishu" />
</a>
<div class="s-user-card--info">
<a href="../../users/2643005/kishu" class="s-user-card--link">kishu</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">29</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-63221179">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/63221179/vivus-trying-to-modify-svg-attributes-got-cannot-read-property-baseval-of-unde" class="question-hyperlink">Vivus Trying to modify SVG attributes got Cannot read property 'baseVal' of undefined</a></h3>
<div class="excerpt">I am trying to animate an SVG line, the problem occurs when I try to modify the coordinates of the line after I used Vivus to animate it.
My goal is to modify the coordinates of the line (for example change its size, position) and then animate it,…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 02 '20 at 21:24">asked Aug 02 '20 at 21:24</time>
<a href="../../users/14038782/konmaz" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/14038782.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="konmaz" />
</a>
<div class="s-user-card--info">
<a href="../../users/14038782/konmaz" class="s-user-card--link">konmaz</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">13</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-62252504">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/62252504/vivusjs-animation-called-properly-but-nothing-visually-happens-or-happens-too-" class="question-hyperlink">VivusJS animation called properly, but nothing visually happens (or happens too fast to spot)</a></h3>
<div class="excerpt">Recently started learning JavaScript and decided to check out some animations, then I found VivusJS.
I got a simple SVG image to do some testing and see how it works. I'm trying to use the simplest example, but nothing seems to happen.
There are no…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/animation" class="post-tag grid--cell" title="show questions tagged 'animation'" rel="tag">animation</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 07 '20 at 22:29">asked Jun 07 '20 at 22:29</time>
<a href="../../users/7175142/doombringer" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/7175142.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Doombringer" />
</a>
<div class="s-user-card--info">
<a href="../../users/7175142/doombringer" class="s-user-card--link">Doombringer</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">596</li>
<li class="s-award-bling s-award-bling__silver" title="4 silver badges">4</li>
<li class="s-award-bling s-award-bling__bronze" title="19 bronze badges">19</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-59295064">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/59295064/how-to-use-expose-vivus-js-methods-in-react" class="question-hyperlink">How to use/expose vivus.js methods in react</a></h3>
<div class="excerpt">I'm using react component for vivus.js library, but don't know how to use its Methods, e.g. I would like to call myVivus.play() on slide change, but not sure how. I'm just learning react, as I understand I need to expose component's methods to use…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 11 '19 at 22:26">asked Dec 11 '19 at 22:26</time>
<a href="../../users/1302532/tim" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1302532.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tim" />
</a>
<div class="s-user-card--info">
<a href="../../users/1302532/tim" class="s-user-card--link">Tim</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">19</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-52118691">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/52118691/how-to-animate-an-referential-svg-background" class="question-hyperlink">How to animate an referential SVG background</a></h3>
<div class="excerpt">Does exists some way to animate referential background svg with vivus.js? I'm trying to use it. I found this code in the oficial documentation but I don't know if this is possible. Look at the code below:
HTML
<section id="svg-bg"…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Aug 31 '18 at 15:31">asked Aug 31 '18 at 15:31</time>
<a href="../../users/9015779/dougfabris" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/9015779.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="dougfabris" />
</a>
<div class="s-user-card--info">
<a href="../../users/9015779/dougfabris" class="s-user-card--link">dougfabris</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">113</li>
<li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li>
<li class="s-award-bling s-award-bling__bronze" title="15 bronze badges">15</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-51809187">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/51809187/best-way-to-use-svg-animating-library-vivus-with-intersection-observer" class="question-hyperlink">Best way to use svg animating library vivus with intersection observer</a></h3>
<div class="excerpt">I use vivus.js to animate SVGs. I wonder what is the best way to use it in combination with intersection observer, concerning performance.
On my page are several sections, including inline svgs. These svgs should be animated when scrolling down the…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/intersection-observer" class="post-tag grid--cell" title="show questions tagged 'intersection-observer'" rel="tag">intersection-observer</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card__deleted">
<time class="s-user-card--time" datetime="asked Aug 12 '18 at 13:18">asked Aug 12 '18 at 13:18</time>
<div class="s-avatar s-avatar__32 s-user-card--avatar">
</div>
<div class="s-user-card--info">user4867900</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-50411531">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/50411531/animate-initially-hidden-element-with-vivus-js-and-gsap" class="question-hyperlink">Animate initially hidden element with Vivus.js and GSAP</a></h3>
<div class="excerpt">So I have this GSAP timeline, which should first animate the fade-in text, and onComplete it should trigger the Vivus.js constructor which it does. However, the SVG element is visible before the animation occurs which is not a desired effect. I have…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/animation" class="post-tag grid--cell" title="show questions tagged 'animation'" rel="tag">animation</a>
<a href="../../questions/tagged/gsap" class="post-tag grid--cell" title="show questions tagged 'gsap'" rel="tag">gsap</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 18 '18 at 12:37">asked May 18 '18 at 12:37</time>
<a href="../../users/7014356/smithy" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/7014356.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Smithy" />
</a>
<div class="s-user-card--info">
<a href="../../users/7014356/smithy" class="s-user-card--link">Smithy</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">807</li>
<li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li>
<li class="s-award-bling s-award-bling__silver" title="17 silver badges">17</li>
<li class="s-award-bling s-award-bling__bronze" title="43 bronze badges">43</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-49366119">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/49366119/draw-multiple-svg-s-with-vivus-js" class="question-hyperlink">Draw multiple SVG's with Vivus.js</a></h3>
<div class="excerpt">How could I draw multiple SVG's with Vivus.js, so I don't have to call the function for each drawing, such as the ones below? Also, there seems to be an issue with the second drawing, i.e. it's not animating... anyone has experience with these…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Mar 19 '18 at 15:04">asked Mar 19 '18 at 15:04</time>
<a href="../../users/8806408/devjoe" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/8806408.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="DevJoe" />
</a>
<div class="s-user-card--info">
<a href="../../users/8806408/devjoe" class="s-user-card--link">DevJoe</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">413</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="7 silver badge">7</li>
<li class="s-award-bling s-award-bling__bronze" title="20 bronze badge">20</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-46368339">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/46368339/multiple-functions-wrapped-in-each-function-jquery" class="question-hyperlink">Multiple functions wrapped in .each(function() - jQuery</a></h3>
<div class="excerpt">Trying to turn multiple functions into one .each function in jQuery, but getting blank page. Any idea what I'm missing?
This code is functioning properly:
new Vivus('svg-0', {duration: 200}, function(){
$('.svg-animation .svg-1').css(…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a>
<a href="../../questions/tagged/each" class="post-tag grid--cell" title="show questions tagged 'each'" rel="tag">each</a>
<a href="../../questions/tagged/expressionengine" class="post-tag grid--cell" title="show questions tagged 'expressionengine'" rel="tag">expressionengine</a>
<a href="../../questions/tagged/vivus" class="post-tag grid--cell" title="show questions tagged 'vivus'" rel="tag">vivus</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Sep 22 '17 at 15:35">asked Sep 22 '17 at 15:35</time>
<a href="../../users/3038693/frshjb373" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3038693.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="frshjb373" />
</a>
<div class="s-user-card--info">
<a href="../../users/3038693/frshjb373" class="s-user-card--link">frshjb373</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">627</li>
<li class="s-award-bling s-award-bling__silver" title="9 silver badges">9</li>
<li class="s-award-bling s-award-bling__bronze" title="27 bronze badges">27</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<a class="s-pagination--item" href="../../questions/tagged/vivus_page=1" rel="prev" title="Go to page 1">Prev </a>
<a class="s-pagination--item" href="../../questions/tagged/vivus_page=1" rel="" title="Go to page 1">1</a>
<div class="s-pagination--item is-selected">2</div>
<a class="s-pagination--item" href="../../questions/tagged/vivus_page=3" rel="" title="Go to page 3">3</a>
<a class="s-pagination--item" href="../../questions/tagged/vivus_page=3" rel="next" title="Go to page 3"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html>