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.
I've designed logo using Illustrator and I saved as SVG file. Inside SVG file I created style for rotate animation1 and animation2 using classes for a different groups and I called svg file in html via tag. Animation1 is active as default and animation2 isn't. What I want is to toggle this classes (class1 for group1 and class2 for gorup2) when I click on this logo using external jQuery. My SVG file is:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="200px" height="120px" viewBox="0 0 362 363" enable-background="new 0 0 362 363" xml:space="preserve">
<defs>
<style type="text/css">
tspan{
font-family: 'Lato', sans-serif;
}
.animation1 {
-webkit-animation: animCircle 3s linear infinite;
-o-animation: animCircle 3s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
#-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
.animation {
-webkit-animation: animCircle 5s linear infinite;
-o-animation: animCircle 5s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
#-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
</style>
<script type="text/javascript" xlink:href="js/custom.js" xlink:actuate="onLoad" xlink:show="other" xlink:type="simple" />
</defs>
<g id="emblem" class="animation1">
<g id="iconLogo">
<path fill="#005B9A" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" d="M357.67,148.25v67.5h-16.15
c-4.24,20.25-12.21,39.12-23.17,55.87l11.44,11.44l-47.73,47.73l-11.44-11.44c-16.75,10.96-35.62,18.93-55.87,23.17v16.15h-67.5
v-16.15c-20.25-4.24-39.12-12.21-55.87-23.17l-11.44,11.44l-47.73-47.73l11.44-11.44C32.69,254.87,24.72,236,20.48,215.75H4.33
v-67.5h16.15c4.24-20.25,12.21-39.12,23.17-55.87L32.21,80.94l47.73-47.73l11.44,11.44c16.75-10.96,35.62-18.93,55.87-23.17V5.33
h67.5v16.15c20.25,4.24,39.12,12.21,55.87,23.17l11.44-11.44l47.73,47.73l-11.44,11.44c10.96,16.75,18.93,35.62,23.17,55.87H357.67z
"/>
<path fill="#FFFFFF" d="M208.754,208.408c-12.424,12.424-31.678,13.873-45.693,4.327l-5.042,5.042l-9.546-9.546l5.042-5.042
c-9.546-14.015-8.096-33.269,4.327-45.693c14.057-14.057,36.854-14.057,50.912,0C222.811,171.553,222.811,194.35,208.754,208.408z"
/>
</g>
<g>
<circle fill="none" cx="183.297" cy="182.953" r="109.277"/>
<text transform="matrix(0.8249 -0.5653 0.5653 0.8249 109.9386 100.7383)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427">V</tspan><tspan x="27.717" y="0.077" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="13.856">E</tspan><tspan x="52.298" y="5.961" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="27.614">K</tspan><tspan x="76.389" y="18.466" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="41.684">T</tspan><tspan x="97.016" y="36.296" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="57.125">O</tspan><tspan x="114.044" y="63.021" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="72.517">R</tspan></text>
<circle fill="none" cx="183.297" cy="182.953" r="133.77"/>
<text transform="matrix(0.2461 0.9692 -0.9692 0.2461 49.5323 199.7095)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40">m</tspan><tspan x="37.252" y="-1.18" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-13.269">a</tspan><tspan x="60.306" y="-7.04" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-22.408">ลก</tspan><tspan x="77.09" y="-14.247" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-29.238">i</tspan><tspan x="89.377" y="-20.906" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-37.504">n</tspan><tspan x="108.688" y="-36.317" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-46.873">s</tspan><tspan x="121.576" y="-50.158" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-55.687">k</tspan><tspan x="134.513" y="-69.532" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-65.856">a</tspan><tspan x="143.672" y="-91.19" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-74.068"> </tspan><tspan x="147.53" y="-104.779" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-80.884">r</tspan><tspan x="150.427" y="-122.863" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-89.86">a</tspan><tspan x="150.245" y="-147.132" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-100.445">d</tspan><tspan x="145.187" y="-171.404" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-108.708">i</tspan><tspan x="140.896" y="-184.64" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-116.823">o</tspan><tspan x="129.464" y="-206.605" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-127.571">n</tspan><tspan x="114.182" y="-225.557" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-135.775">i</tspan><tspan x="104.422" y="-235.227" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-143.335">c</tspan><tspan x="85.943" y="-248.721" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-153.366">a</tspan></text>
</g>
</g>
</svg>
Any help?