Animate line in desired direction with Vivus.js - javascript

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 perhaps? Here's the pen: https://codepen.io/anon/pen/mLzYyE
Code:
var animate = ["animate1"];
animate.forEach(function (svgId) {
return new Vivus(svgId, {
type: "async",
start: "autostart",
duration: 100
});
});


As I understand Vivus.js works only with path element. So in your case you should replace rect elements to path. I also changed type to oneByOne for sequenced animation. Here is a simplified example:
var animate = ["animate1"];
animate.forEach(function (svgId) {
return new Vivus(svgId, {
type: 'oneByOne',
start: "autostart",
duration: 100
});
});
svg {
height: 500px;
width: 200px;
}
path {
stroke-width: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
<path stroke="red" d="M0 0 l 0 20"/>
<path stroke="red" d="M0 25 l 0 20"/>
<path stroke="red" d="M0 50 l 0 20"/>
<path stroke="red" d="M0 75 l 30 0"/>
</svg>

Related

Rotating a polygon in SVG

In the code below, I tried to move the polygon which is the arrow's head and place it at the position 100,100. But polygon is placed at wrong direction. The position of line and will change depending upon the input. I need the output to be something like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points="2,7 0,0 11,7 0,14" transform="translate(100,100) rotate(45 0 0)"/ stroke="red" fill="red"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="green"/>
</svg>

The smallest fix is probably to add a translation that lets you treat the concave part of the arrow as the origin for both the rotation and other translation.
<polygon … transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="2,7 0,0 11,7 0,14" transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" stroke="red" fill="red" />
<line x1="0" y1="0" x2="100" y2="100" stroke="green" />
</svg>

You are using
rotate(deg, cx, cy)
to rotate element. With this configuration, it means that rotate the element deg degree with respect to point (cx,cy) (of element)
So you should set cx, cy value as a center of your element.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points="2,7 0,0 11,7 0,14" transform="translate(100,100) rotate(45 10 0)"/ stroke="red" fill="red"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="green"/>
</svg>

Greensock animation not working on SVG height

I just wanted to do a very simple tweenMax animation, where the height of the bar goes from "0" to "100%". Now my SVG looks like below:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 64" style="enable-background:new 0 0 69 64;" xml:space="preserve">
<style type="text/css">
.st0{fill:#712215;}
.st1{fill:none;stroke:#712215;stroke-miterlimit:10;}
</style>
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z"/>
<path id="XMLID_7_" class="st0" d="M31.9,47.4h-5.4c-0.5,0-1-0.5-1-1V32.9c0-0.5,0.5-1,1-1h5.4c0.6,0,1,0.5,1,1v13.5
C32.9,47,32.5,47.4,31.9,47.4z"/>
<path id="XMLID_6_" class="st0" d="M41.9,47.4h-5.4c-0.6,0-1-0.5-1-1V36c0-0.5,0.4-1,1-1h5.4c0.5,0,1,0.5,1,1v10.5
C42.9,47,42.5,47.4,41.9,47.4z"/>
<path id="XMLID_5_" class="st0" d="M51,47.4h-5.4c-0.5,0-1-0.5-1-1V30c0-0.5,0.5-1,1-1H51c0.6,0,1,0.5,1,1v16.4
C52,47,51.5,47.4,51,47.4z"/>
<polygon id="XMLID_4_" class="st0" points="16.6,35 18,36.4 29.6,25.6 38.9,33 49.3,21.9 47.3,20 38.9,29.5 29.2,21.8 15.9,34.5 "/>
<polygon id="XMLID_3_" class="st0" points="43.2,17.8 51.7,17.9 51.9,26 "/>
<rect id="XMLID_2_" x="2.5" y="11.6" class="st1" width="63.5" height="40.8"/>
</svg>
Fiddle here. Now I have the following JavaScript to animate the bars:
$(function () {
var tx = new TimelineMax();
TweenMax.fromTo($('path')[0] , 2 , { css : { height : 0 } } , { css : { height : '100px' } });
});
But the height animation doesn't seem to be working. What am I doing wrong?

The problem is that height isn't an attribute supported by the path element;
an easy fix would be using transform:scaleY :
TweenMax.fromTo($('path')[0], 2, {
css: {
transform: 'scaleY(0)'
// height: 0
}
}, {
css: {
transform: 'scaleY(1)'
//height: '100px'
}
});
fiddle
For a more customized solution you might look into changing the d attribute...

Usually I'd use clipPath and move the entire bar to top. See fiddle
<clipPath id="myClip">
<path d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</clipPath>
<g clip-path="url(#myClip)">
<g id="path0" transform="translate(0 10)">
<path id="XMLID_8_" class="st0" d="M23,47.4h-5.4c-0.6,0-1-0.5-1-1v-6.9c0-0.5,0.4-1,1-1H23c0.5,0,1,0.5,1,1v6.9
C24,47,23.5,47.4,23,47.4z" />
</g>
</g>

Vivus JS doesn't seem to animate certain <path> 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 this CodePen: http://codepen.io/anon/pen/yOqdbN summarized as follows
<svg xmlns="http://www.w3.org/2000/svg">
<path d="...">
<path d="...">
</svg>
Does anyone know why this is happening? Thank you very much for any help pointing me in the right direction.

Vivus works by animating the strokeDashOffset property of a path which requires that your path has a stroke defined, e.g.
<path d="..." stroke="black">
Note that from your nodes I see that you can achieve better results setting fill="transparent"
var els = document.querySelectorAll('path');
Array.prototype.slice.call(els).forEach(function(el) {
el.setAttribute('stroke', 'black')
el.setAttribute('fill', 'transparent')
})
var SVGcrown = new Vivus('SVGcrown', {
duration: 300,
animTimingFunction: Vivus.EASE_OUT
});
body {
background: #FFF;
}
#SVGcrown {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script>
<svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442 l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638 C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775 C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z"
/>
<path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001 C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36 c1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z"
/>
<path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13 c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277 C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695 c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z"
/>
<path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4 s4-1.794,4-4S26.206,2,24,2z" />
<path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c0.552,0,1,0.447,1,1S29.552,7,29,7z" />
<path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4C25,15.553,24.552,16,24,16z" />
</svg>

How to move a shape in a SVG clip

I guessing that I'm trying to do something that just not possible, so this is why I'd like to do :
http://codepen.io/anon/pen/doZpRJ
So I tested multiple way to try to do that, like create a clip shape with a height to 0. But the problem is that I want to make it appear from the bottom.
My first attempt was to create a clip shape and to translate the "SHA" from outside the clip shap to inside.
But this is not working, there is like no "overflow: hidden" effect
Here is my code
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="180px" height="180px" viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
<defs>
<clipPath id="clip-shape">
<rect x="10" y="20" width="100" height="50" />
</clipPath>
</defs>
<g>
<path id="sha-shape" style="fill:#FF0000; clip-path: url(#clip-shape);" d="M137.48,44.615c-3.143,0-5.719,2.533-5.719,5.721c0,1.97,1.031,3.658,2.531,4.69l-0.609,1.267
c-0.234,0.469-0.33,0.938-0.33,1.454c0,1.594,1.361,3.235,3.238,3.235c1.219,0,2.344-0.703,2.906-1.829l3.096-6.378
c0.375-0.703,0.607-1.595,0.607-2.438C143.201,47.148,140.576,44.615,137.48,44.615 M123.977,50.666l-1.172-2.486
c-1.08-2.298-3.189-3.611-5.441-3.611c-2.344,0-4.033,1.36-4.922,3.142l-10.693,21.807c-0.422,0.844-0.609,1.829-0.609,2.72
c0,2.908,2.156,5.768,5.486,5.768c2.203,0,4.361-1.36,5.486-3.611L123.977,50.666z M133.59,72.237c0-0.892-0.236-1.829-0.656-2.72
L124.82,52.4l-9.848,19.837h6.613l1.031,2.157c1.078,2.25,3.281,3.611,5.486,3.611c3.328,0,5.439-2.86,5.439-5.768H133.59z
M80.083,72.284V50.29c0-3.142-2.577-5.721-5.72-5.721c-3.143,0-5.674,2.58-5.674,5.721v21.994c0,3.189,2.532,5.721,5.674,5.721
C77.505,78.005,80.083,75.473,80.083,72.284 M98.325,72.284V50.29c0-3.142-2.532-5.721-5.72-5.721c-3.143,0-5.675,2.58-5.675,5.721
v5.673h-5.159V66.61h5.159v5.674c0,3.189,2.532,5.721,5.675,5.721C95.793,78.005,98.325,75.473,98.325,72.284 M53.025,67.782
l-5.909-2.485c-0.468-0.188-0.938-0.33-1.453-0.33c-2.297,0-3.846,2.159-3.846,4.361c0,5.348,6.519,8.583,11.208,8.676V67.782z
M53.025,64.874V44.569c-5.674,0-10.55,4.409-10.55,10.316c0,3.283,1.359,6.19,4.547,7.503L53.025,64.874z M54.714,78.005
c6.283-0.188,11.067-4.455,11.067-10.833c0-7.128-4.737-8.722-11.067-11.067V78.005z M54.714,53.432l4.501,1.688
c0.469,0.141,0.891,0.234,1.407,0.234c2.298,0,3.752-1.688,3.752-3.892c0-4.689-5.816-6.8-9.661-6.894V53.432z"/>
</g>
And my little JS
var shaShape = $('#sha-shape');
TweenLite.set(shaShape, {css: {y: "40px"}});
$('svg').hover(function() {
TweenLite.to(shaShape, .35, {y: "0px"});
}, function() {
TweenLite.to(shaShape, .35, {y: "40px"});
});
You can see the code "working" here :
http://codepen.io/anon/pen/rVYMRm
Cheers,

Just put the clip path on the parent group.
<g style="clip-path: url(#clip-shape);">
<path id="sha-shape" style="fill:#FF0000;" .../>
http://codepen.io/anon/pen/GJONNV

How to animate changing path lengths (line) with markers in svg

I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.

I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>

Categories

Resources