This question already has answers here:
Activate CSS3 animation when the content scrolls into view
(6 answers)
Closed 3 years ago.
.responsive {
width:200px;
float:left;
margin-top: 750px;
margin-bottom: 750px;
}
.st0 {
fill: #ffffff;
}
.st1 {
fill: none;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st2 {
fill: #ffffff;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #2646ff;
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#responsive .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 0;
animation: responsive 4s ease-in-out 0s;
animation-direction: reverse;
}
#keyframes responsive {
to {
stroke-dashoffset: 1932;
}
}
<div class="responsive">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1200 780"
style="enable-background:new 0 0 1200 780;"
xml:space="preserve"
>
<g id="Layer_1"></g>
<g id="Layer_6">
<g>
<g>
<path
class="st0"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
<path
class="st1"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
</g>
<line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
<ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
</g>
</g>
<g id="Layer_5">
<g>
<g>
<path
class="st0"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
</g>
</g>
<g id="Layer_4">
<g>
<g>
<path
class="st0"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
</g>
</g>
<g id="responsive">
<g>
<path
class="st3"
d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2"
/>
</g>
</g>
</svg>
</div>
Scroll down in the snippet to view the svg + animation.
I want to start this animation when svg (animation) is in view. How can I do this? I came across a lot of javascript code but the problem is it's all too complicated with different kind of classes etc. I just do wanna start the animation 1 time and then keep it in the ending state (so not looping or anything).
I gave the section .responsive some margin top and bottom, normally there is content in between the white areas.
If you wanna a simple solution, then WOW.js is your choice :)
Steps to add animation for your svg:
Install wow.js as it said in documentation of plugin.
Add wow classname to your animation wrapper, and start css animation on
.animated #responsive .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 0;
animation: responsive 4s ease-in-out 0s;
animation-direction: reverse;
}
This is example of how your wow.js init should look like :)
wow = new WOW(
{
boxClass: 'wow', // add this className to animation wrapper
animateClass: 'animated', // class added by lib, when your item are in view
offset: 0, // number of px before item appear on screen and animation starts
mobile: true, // default
live: true // `true` if you add items on page dynamically
}
)
wow.init();
I am drawing some SVG-paths using CSS animations. It all works fine when drawing all the paths at the same time. When adding a delay to the animation, some of the parts of the paths are visible before starting the animation. They then suddenly disappear and the animation goes on just like I want it to.
Here is a codepen of it happening: Check here
// SVG code
var svgs = document.getElementsByTagName('svg');
function selfdraw(name){
for(var i=0; i<name.length; i++){
name[i].classList.add('draw');
}
}
/* SVG Styles */
svg *{
fill:none;
stroke:none;
stroke-dasharray: 0% 100%;
}
.draw .st0 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.draw .st1 {
stroke: #3DBAC4;
stroke-width:5;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 2s;
}
.draw .st2 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 3s;
}
.draw .st3 {
stroke: #8BD6DC;
stroke-width:3;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 4s;
}
#-webkit-keyframes self-draw{
0% { stroke-dasharray: 0% 100% }
100% { stroke-dasharray: 100% 0% }
}
<div style ="max-width:200px;">
<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 180 554" style="enable-background:new 0 0 180 554;" xml:space="preserve">
<path class="st0" d="M50.38,130.89l0.3-109.65l84.9,0.68l-0.3,109.65L50.38,130.89z"/>
<g>
<g>
<line class="st1" x1="69.19" y1="103.99" x2="116.08" y2="104.24"/>
</g>
<g>
<line class="st1" x1="69.28" y1="87.07" x2="116.17" y2="87.32"/>
</g>
<g>
<line class="st1" x1="69.37" y1="70.15" x2="116.26" y2="70.4"/>
</g>
<g>
<line class="st1" x1="69.46" y1="53.22" x2="116.35" y2="53.48"/>
</g>
</g>
<g>
<line class="st2" x1="82.77" y1="300.98" x2="79.54" y2="265.43"/>
</g>
<g>
<g>
<path class="st2" d="M104.68,507.15H85.32c-5.96,0-10.8-4.84-10.8-10.8v-20.83c-10.83-6.95-17.52-19.11-17.52-32
c0-20.95,17.05-38,38-38s38,17.05,38,38c0,12.89-6.68,25.05-17.52,32v20.83C115.48,502.31,110.64,507.15,104.68,507.15z"/>
</g>
</g>
<g>
<g>
<line class="st1" x1="73.82" y1="446.52" x2="116.13" y2="446.45"/>
</g>
</g>
<g>
<g>
<path class="st2" d="M104.62,518.15H85.38v-33.28h19.24V518.15z"/>
</g>
</g>
<polyline class="st1" points="80.36,432.84 92.5,484 97.5,484 110.06,432.39 "/>
<path class="st3" d="M94.86,143.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M94.86,337.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M142.84,376.94c-0.27,1.32-0.2,2.61-0.14,3.86c0.05,1.05,0.1,2.05-0.07,2.87c-0.2,0.93-1.31,1.81-3.15,2.45
c-2.43,0.85-5.19,1.82-6.37,4.26c-0.82,1.71-0.75,3.57-0.67,5.36c0.03,0.71,0.06,1.38,0.03,2.02c-0.06,1.31-0.81,2.4-2.02,2.93
c-0.58,0.25-1.2,0.47-1.86,0.69c-1.71,0.59-3.49,1.2-4.78,2.61"/>
<path class="st3" d="M170.49,420.46c-0.86,1.04-1.41,2.2-1.95,3.33c-0.45,0.95-0.88,1.85-1.42,2.5c-0.61,0.73-2.01,0.98-3.94,0.67
c-2.55-0.4-5.43-0.85-7.63,0.74c-1.53,1.12-2.34,2.79-3.12,4.41c-0.31,0.64-0.6,1.24-0.92,1.79c-0.67,1.12-1.85,1.73-3.16,1.63
c-0.63-0.05-1.28-0.16-1.97-0.27c-1.79-0.29-3.64-0.59-5.45,0.04"/>
<path class="st3" d="M169.88,474.23c-1.33,0.23-2.51,0.76-3.64,1.27c-0.96,0.43-1.87,0.84-2.7,0.98c-0.94,0.16-2.16-0.56-3.43-2.04
c-1.68-1.95-3.58-4.17-6.29-4.38c-1.89-0.14-3.59,0.61-5.24,1.33c-0.65,0.29-1.26,0.56-1.87,0.76c-1.24,0.42-2.53,0.12-3.46-0.81
c-0.45-0.45-0.87-0.95-1.33-1.48c-1.17-1.38-2.39-2.81-4.17-3.5"/>
<path class="st3" d="M21.69,479.37c0.92-0.98,1.55-2.11,2.16-3.2c0.51-0.92,0.99-1.79,1.57-2.4c0.66-0.69,2.07-0.85,3.97-0.42
c2.51,0.56,5.37,1.2,7.66-0.25c1.6-1.02,2.52-2.64,3.4-4.2c0.35-0.62,0.68-1.2,1.04-1.73c0.74-1.08,1.95-1.61,3.26-1.42
c0.63,0.09,1.27,0.24,1.95,0.39c1.77,0.41,3.59,0.82,5.44,0.31"/>
<path class="st3" d="M15.18,429.81c1.28-0.43,2.36-1.13,3.41-1.8c0.89-0.57,1.72-1.11,2.52-1.37c0.9-0.29,2.22,0.23,3.7,1.51
c1.95,1.68,4.16,3.59,6.87,3.4c1.89-0.14,3.46-1.13,4.98-2.1c0.6-0.38,1.16-0.74,1.73-1.03c1.16-0.6,2.48-0.5,3.54,0.29
c0.51,0.38,1,0.81,1.53,1.27c1.36,1.19,2.78,2.43,4.65,2.84"/>
<path class="st3" d="M41.1,379.47c1.25,0.5,2.53,0.68,3.77,0.84c1.04,0.14,2.03,0.27,2.81,0.59c0.88,0.36,1.54,1.62,1.84,3.54
c0.39,2.55,0.84,5.43,3.02,7.04c1.53,1.12,3.37,1.38,5.15,1.63c0.7,0.1,1.36,0.19,1.99,0.34c1.27,0.29,2.21,1.23,2.51,2.52
c0.14,0.62,0.24,1.27,0.34,1.96c0.27,1.79,0.54,3.65,1.7,5.18"/>
<line class="st2" x1="63" y1="243.52" x2="125" y2="243.52"/>
<polygon class="st2" points="131.5,214.5 56.5,214.5 52.5,243.5 61.5,243.5 70.27,325.92 117.74,325.92 126.41,243.5 135.5,243.5
"/>
</svg>
</div>
<button onclick="selfdraw(svgs)">CLICK ME</button>
I would like all the paths to be invisible from the start, and then draw themselves out nicely. I don't see what I have done wrong.
My goal is to create scrolling lines similar to this site. I have started using a simple SVG shape to try and get it to work. I can do a simple animation, but not sure how to fill a specific color from start to finish.
My SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75px" height="100px" viewBox="0 -450 1230 1640" preserveAspectRatio="xMidYMid meet">
<path class="path" d="M131.2,-318.8a672.4,672.4,0,0,1,0,1344.8" stroke="black" id="e7_circleArc" style="fill: none; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 5px, 5px;" />
My CSS
.path {
stroke-dasharray: 500;
stroke-dashoffset: 5000;
animation: dash 2s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
You can see the working fiddle here - https://jsfiddle.net/cbd9L2L3/
I used the same method as the link you posted - animating the 'bottom' value of clip: rect() with jquery. With the difference that I went and used SVG shapes (one for the background and one for the one to be animated) Just a note that clip is apparently deprecated and has been replaced with clip-path. I tried with clip-path but couldn't achieve the same result.
Absolutely position both lines on top of one another if it's not obvious:
$('#line1-overlay').animate({
fontSize: 515 //some unimportant CSS to animate so we get some values - and height of the line
}, {
duration: 2000,
step: function (now, fx) { //now is the animated value from initial css value
$(this).css('clip', 'rect(0px, 217px, ' + now + 'px, 0px)')
}
});
.line-container {
position: relative;
}
.line {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line-container">
<svg version="1.1" class="line" id="line1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
<path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
</svg>
<svg version="1.1" class="line" id="line1-overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="217px" height="515px" viewBox="0 0 217 515" enable-background="new 0 0 217 515" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M77.229,10.222c64,22,142,140,129,203
c-13,63-152,60-186,118c-34,58,61,159,130,177"/>
</svg>
</div>
Also: JSFiddle DEMO
Thanks partly to this answer.