Javascript interfering with 2nd SVG line animation - javascript
Link to example: http://bss.com/RK/full3.html -- I want the word MEDIA to STAY on top of the background image after it writes in. Can anyone help me with that? Can I use a div within another div that is using javascript that is interfering with what I want to happen with the interior div.
I am sure this is an easy question for SOers. I've gotten very far but now just spinning my wheels and just can't figure this last bit. I saw this post CSS Animation property stays after animating because I used some from it and it is very close to working for me, however, I have this #box div inside another div that has js applied to it saying
$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});
and the fadeOut and remove interferes with the second div. I have this (.center-div) div with an svg that fades in then out completely. There is a background image that stays after the fade.
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-
linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:
2000;animation-delay:4.5s;animation-timing-function: ease-in forwards;
} /*media word */
I think I need another div for the .st1 content (word media) to fade in and then STAY but can't get that to work. I want the word MEDIA to stay after it comes in. But another div just renders below the center-div.
Have used z-index to no avail. I've tried making a class instead of id, I've tried nesting them as mentioned -- what can I do to get this "media" svg line animation element to come in and STAY, when the enveloping div has javascript to fade out and remove? Thank you. I hope someone can help me as I really need to move on to other things.
Firstly, you are doing a .remove() of the <div> that contains the SVG. So you obviously can't do that.
What you need to do instead is just fade out the elements of the SVG that you want to hide.
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
Since you want to fade out the black background also. You'll need to remove the background color of that <div>, and instead add a black rectangle to the SVG. Then you can fade that out also.
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
Updated example:
<div class="wrapper">
<div class="center-div">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#fcfafa;stroke:none;stroke-miterlimit:10;stroke-width:1; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;
} /*WHITE TINY LEAVES */
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:4.5s;
animation-timing-function: ease-in forwards;
} /*media word */
.st2{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:5.6s;
animation-timing-function: ease-in forwards;; } /* dot white*/
.st3{fill:none;stroke:#89CB6A;stroke-width:4;stroke-miterlimit:10;} /* the green line */
/* .st4{fill:none;stroke:#89CB6A;stroke-width:8;stroke-miterlimit:10;} cant see difference-tiny amount of leaves I guess */
.st5{fill:none;stroke:#89CB6A;stroke-width:2;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;} /* reg leaves */
]]>
</style>
<style type="text/css">
svg {
height: 100%;
width: 100%;
margin:auto;
}
path {
stroke-dasharray: 2100;
animation: draw 3.4s linear forwards;
/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
}
.path2 {
animation-delay: 2s; /*number not mattering here right now
animation: draw 3.4s linear ;*/
}
#keyframes draw {
from {
stroke-dashoffset: 2200;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes msvg {
0% { stroke-dashoffset: 1500; }
12% { stroke-dashoffset: 1500; }
44% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0;
}
}
.wrapper {
position: relative;
background-image: url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/bss/treebanner_893x332.jpg);
background-size: contain;
margin: 0 auto;
max-width: 100%;
width: 1300px;
height: 483px;
z-index: 25;
background-repeat: no-repeat;
/* object-fit: cover; nothing */
}
.center-div /*fades out green line and tree see js*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:13;
background-position: left top;
}
.media-div /*bring in word and stay*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:1;
background-position: left top;
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
</style>
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
<g id="MEDIA">
<path class="st1" d="M234.7,201.1l-2.4,10.4c0.3,0.4,14.3-19.9,15.6-0.7c0.5,0.1,8.4-15,12.2-2.9c1.9,2.9,4.1,3.4,5.6,3.7
c7.8,1.7,15.8-6.6,17.3-8.1c0,0,8.1-9.5,11-5.5c2.2,3-4,6.8-10.8,5.9c-0.7,2.5-1.2,6.1,6.8,7.8c11.9,2.5,25-5,29.2-8.6
c3.7-3.1,7.1-5.6,9.3,0c-2.3-8.9-12.4,1.5-9.2,8c0.8,1.6,2.6,1.6,5.1-0.2c3.5-2.4,24.1-35.8,17.2-36.3c-7.3,0.5-9.7,22.1-9.7,22.8
c0,0.7-0.1,15.3,11.1,14.6c11.9-0.8,18.3-6.7,20.5-12.2c-3,7-2.6,11.4,7.3,12.5c11.4,0.2,20.1-14.5,27.3-14.7
c-0.2-0.8-13.9,5.6-11,13.7c0.2,0.4,0.5,0.9,1.2,1.1c2.2,0.7,6.7-4.4,8.8-11.2c-0.8-0.2,4.5,22.4,29.2,1.2"/>
<path class="st2" d="M364.2,188.6c0,0,4.1-1,4.2-2.1"/>
</g>
<g id="line">
<path class="st3" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6
s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st4" d="M739.8,232.8"/>
</g>
<g id="tree_2">
<path class="st5" d="M737.5,127.7c-0.6,0.3-1.5,2.9-2.1,3.2l-15.6-2.8l-3.3,4.6l0.4,5.8c0,0-2.1,3.7-8.7,7
c-7.8,3.9-13.6-0.4-14.2-0.1c-0.6-1.2-1.3,2.1-3.2,2.5c-1.9,0.5-1.7-3.5-1.3-4.1c0.3-0.6,2.5-2.2,3.7-4.5c1.1-2.3-1.9-3.6-3.2-2.5
c-0.4,0.3-1.7,1.1-1.8,2c-0.3,2.6-4.2,4.4-5.6,3c-2.1-2.1-5.9,2.8-8.1,3.3c-3.7-1.8-1.2-4.3-1.2-4.3l6.4-2.4l2.7-2l-1.9-2.8
c0,0-0.2-7,6.1-7.8c2.7-0.3-1.1,6.2-0.7,6.9c0.4,0.8,4.6-0.4,4.6-0.4s2.9,1.7,2.9-2.5c0-4.1,2.9,0,2.9,0l2.1,6.2
c0,0,7.7-10,8.3-9.1c0,0,0.4,5.8-1.7,9.9c-2.1,4.1,9.5,0,6.6-5.4c-2.9-5.4-1.7-3.7,0.4-4.6c2.1-0.8,5.8-1.2,10.4-7
c4.6-5.8,4.1-5,8.3-1.7s-9.1,7.5-9.1,7.5s6.6-1.2,12.4-3.3c5.8-2.1,3.1-7.2,2.2-8.5c-0.9-1.3-6-1.8-6-1.8s1.7-5.5,1.2-6.6
c-0.4-1.1-2.5,2.5-2.5,2.5l-3.7-3.3l-2.5,3.7c0,0-3.7,0.8-6.2,9.9c-2.5,9.1,2.1,4.6-1.2,3.7c-3.3-0.8-4.4-8-1.7-12.8
c2.4-4.2,8.3-4,8.3-4l-4.3-2.5c0,0-3.2,2.7-4.7,0.4c-1.9,4.2,1.2,8.1-7.1,1.1c-2.4,0.9,2,7-0.5,7c-2.5,0-4.1-2.1-4.1-2.1l-5.4,5
c0,0-1.2-6.7-5.3-2c-1.8,2.2,2.8-9.1-0.1-9.4c-2.9-0.3-4.1,8.5-5.4,6s-4.9-4.6-6.6,0.4c-0.8,2.2-2.2,6.5-4.3,7.4
c-0.3,1.1-0.3,2.3,0.1,3.7c0.1,1.1,3.1,3,1.8,7.1c-0.7,2.1-7.2-4.4-6.2-8.5c0.2-0.7,9.8-11.1,4.8-16c-2-1.9-3.7-0.4-5,1.1
c-1.2,1.6,2.2,9.2,0.7,9.1s-3.8-6-4.6-6.4c-0.7-0.4-1.3,4.5-5.1,4.5c-3.7,0,2.7-9.5-3.9-5.4c-6.6,4.1-1.7,9.9-1.7,9.9l-5,0.4
c0,0,4.1,4.1,1.2,4.6s-5.8-9.1-5.8-9.1s3.1,12.9,1.2,11.2c-9.7-8.8-2.7,3-6,4.6c-3.3,1.7-2.9-5.3-7.6-4.4c-1.2,0.2-3.8,2.7-0.9,4.8
c2.9,2.1-6.2,6.2-10.4,6.6s-0.2,6.5-4.6,8.7c-3.1,1.6-7.8-2.5-7.8-2.5l3.7,9.5l-5.8,2.5l0.8,4.6c0,0-1.9,3.3-0.4,3.7
c1.5,0.4,4.6-2.5,4.6-2.5s4.6,2.9,5.8,0c1.2-2.9,7.9-0.4,12.8-1.7c5-1.2,1.2,5.8,1.2,5.8s-7.5-3.3-6.6,4.1s5.4,4.6,5.4,2.9
c0-1.7,0-4.6,5-4.1c5,0.4,2.5,2.9,6.6,2.1c4.1-0.8,3.1-4.4,6.6-8.7c3.1-3.8,13.3,4.4,11.6,8.4"/>
<line class="st5" x1="611.9" y1="166.5" x2="612.1" y2="166.2"/>
<path class="st5" d="M748.8,207.6c-2-1.5-6.9,2.2-6.9,2.2s-6.9,1.5-8.9,2.1c-1.5,0.5-6.9,1.3-8.2,1.6c-0.8-0.6-4.9,0.3-6.7-0.4
c-1.9-0.8-5.8,0-7.9-3.3c-2.1-3.3-4.7-0.1-4.7-0.1l2.7-3.2l-2.5-6.6l-6.2-1.7l-6.6-5c0,0-9.5,1.7-8.3,2.9s-3.7,3.7,0.4,5
c4.1,1.2-9.5,6.2-9.1,0c0.4-6.2,0.4-10.4-5-6.2s-6.6,5-8.7,9.1c-0.9,1.7-5.2-2.3-5.2-2.3s-4.7,7.2-8,5.2c-3.3-2.1-1.3-5.5,0.6-7.7
c0.7,1.6,0.7,1.7,1.9,3.5c3.3,3.3,2.9,2.5,4.6-0.4c1.7-2.9,2.1-8.7,2.1-8.7l-3.3-2.1c0,0-7,5-12,5.4c-5,0.4-4-2.9-0.3-3.4
c4.4-0.6-3-8.6-7.1-6.9c-4.1,1.7-1.2-5.4,3.3-5c4.6,0.4,6.6,3.3,6.6,3.3l2.9-3.3v2.5l4.6-2.9l0.4,3.7c0,0-1.7,4.6,3.7,3.7
s5.8-2.5,5.8-2.5s-2.9-3.3-5.4-1.2c-2.5,2.1,2.9-6.2,6.6-3.3c3.7,2.9,6.2,5,8.3,2.5c2.1-2.5,0.8-8.3,4.1-7.5
c3.3,0.8-9.9-2.1-9.9-2.1l3.3-2.5c0,0-2.5-6.2-5.8-4.6c-3.3,1.7-8.3-1.2-8.3-1.2l-0.8,4.1c0,0-9.1,2.6-11.2,2.7
c-9.9,0.3-12.7,9.4-16.5,8.5c-5-1.2-5.1-2.6-3.8-5c1.5-3-5.7-2.7-2.9-4.6c5.4-3.5-4.6-10.1-4.6-3.3c0,2.1-2.1,7-2.9,7.5
c-0.8,0.4-2.5-3.7-2.5-3.7s-3.3,2.1-3.1-1.6c0.2-2.1,2.8-5.3,4.1-4"/>
<path class="st5" d="M612.1,166.2c-0.2,0-0.4,0-0.5,0"/>
<path class="st5" d="M682.7,117.6c0,0-3,0.8-3.9,5.1c-0.3,1.3-1.2,2.7-1.2,2.7S685.9,124.8,682.7,117.6z"/>
<path class="st5" d="M626.8,181.2c0,0-2.9,1.1-1.9,3.9c1,2.8-0.4,2-0.4,2s5.8-1.2,2.6-5.5"/>
<path class="st5" d="M684,161.2c0,0,2.1,2,4.4,0.1c0.8-0.3,2-0.4,2-0.4s-3.5-4.7-6.1,0L684,161.2z"/>
<path class="st5" d="M633.5,149.5c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.7,3.6,5L633.5,149.5z"/>
<path class="st5" d="M618.3,158.8c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.6,3.6,5"/>
<path class="st5" d="M639.7,128.4"/>
<path class="st5" d="M646.9,122.7"/>
<path class="st5" d="M659.5,98.5"/>
<path class="st0" d="M714.3,112.8c0,0-0.5,2,1.4,2.5c1.9,0.5,0.9,1,0.9,1s1.5-3.6-2.1-3.5L714.3,112.8z"/>
<path class="st5" d="M691.4,148c0,0-2.6,7.9,0.7,12l0.7-0.9c0,0,4.4-7.7,5.4-6.6s-1,7.5-0.5,8.1c0.5,0.6,4.6-6,4.6-0.6
c0,0.7,1.7,2.4-0.6,2.8c-2.3,0.5,1.2,2.8-0.2,3.4c-1.5,0.6-1.6-1.2-5.4,0.4c-3.8,1.7-4.8,5.5-4.8,5.5l6.7-1.3c0,0,0.3,0.5-1.2,0.7
c-4.7,0.5-10.9,13.3-10.9,13.3s0.8-0.2,4,0.4c7.2,1.4,10.3,6.4,13.2,6.4c2.9,0,8.5,4.7,13.1,13.5c2.7,3.7,5.2,0.1,5.2-0.7
c0-0.8-0.3-2.7-0.3-2.7s-0.1-18.4,3.9-21.1c-3,4.2-4.6,19.1-2.5,19.9c2.1,0.8,5.4,0,5.4,0l1.2,1.7c0,0,1.7,2.3,6.6-0.4
s7.1-4.9,12.1-6.1c1.2-0.3,2.2-0.3,3-0.1"/>
<path class="st0" d="M703.3,147.5c0,0,2.7,3.7,6.2,3.9c3.5,0.2,2.9-2.1,4.8-1.4"/>
<path class="st0" d="M693.9,164.6c0,0,0.3-2.1-1.8-2.7c-0.5-0.4-1.1-1-1.1-1s-1.3,4.2,2.7,3.7L693.9,164.6z"/>
<line class="st5" x1="750.2" y1="192.6" x2="749.3" y2="195.1"/>
</g>
<g id="leaves">
<path class="st5" d="M661.6,156c0,0,5.7,2.3,1.4,5.7c-3.3-3-1.9-5.7-1.9-5.7l1.6-2.7c0,0-0.9-4.9-7.7-3.7c2.7,7,7.2,2.6,7.2,2.6"/>
<path class="st0" d="M727.3,129.8c-0.2,2.2,1.8-1.3,2.2,4c0.1,2-1.5,2.9-1.5,2.9c4.1,1.2,4-2.2,3.7-3.1c-0.3-0.8-2.6-2.1-2.6-2.1"
/>
<path class="st0" d="M702.6,116.5c0,0-1.7-4.3,1.9-6.8C706.7,113.1,702.6,116.5,702.6,116.5c-0.1-0.1-1.6,3.3-3.8,3.2
c-2.2-0.1-3.8,3.4-3.8,3.4s3.3,2.4,4.1-3.3c4.9-1.4,4.9,1.5,4.9,2.6c0,0-0.4,4.4,4.4,4.2c0.6-2.8-4.4-4.2-4.4-4.2s5.8,1.9,7.9-2.9"
/>
<path class="st5" d="M641.2,147.2c0,0-0.5,1.2,3.8,3.5c4.4,2.3,3.3-1.7,3.3-1.7s-1.5-5,3.7-6.2c1.7,7.7-2.8,7.6-2.8,7.6"/>
<path class="st5" d="M628.9,139.9c0,0-7.7,0.2-7.3-4.4c0,0,6.2-3.3,8.3,4.6"/>
<path class="st5" d="M670.8,129.6c0,0-7-0.4-4.8-6.2c2.5,0.2,4.3,4.8,3.7,5.8"/>
<path class="st5" d="M662.4,130.7c-1.6-0.6-2.5-0.4-2.5-0.4s-2.7-2.7-6.8,0.7c-2.1,1.3-2.2,0-2.2,0c2.7,2.7,3.4,2.7,6,2.1
s2.6-2.7,2.6-2.7l-2.8-2.4c0,0-2.8-3.3,1.5-5.7c2.6-1.3,0.6-2.8,0.6-2.8s4,2.7,3.2,4.8c-0.8,2.1-6.1,1.9-6.1,1.9"/>
<path class="st5" d="M626.2,146.1c0,0-0.4,3.5-7.9,3.7c4.1-5,0.4-3.1,7.2-5.8C626.2,145.5,626.2,146.1,626.2,146.1z"/>
<path class="st0" d="M654.6,108.5c0,0-5.1-3.9-7.2,1.8c3.6,1.5,3.9,0.8,6.4-1.1"/>
<path class="st5" d="M644.1,154.9c0,0,2.8-0.7,5.2,4.8c-5-1.6-2.5,0.6-6.6-3.7C643.6,155.1,644.1,154.9,644.1,154.9z"/>
<path class="st0" d="M681.5,193.9c0,0,1.4,2.4-2,4.6c-2.9-3.4,1.2-5.5,0.6-5c4.1-0.1,3.5-2,2.9-4.9c-1.1-4.8-3-1.4-3-1.4
s-3.2,4.2-7.5,1.1c4.8-6.2,7.2-1.1,7.2-1.1"/>
<path class="st0" d="M643.7,164.3c0,0,0.7-5.3-3.5-6.4c-4.2-1.1-2-2.2-2-2.2s-2.5,8.1,5.4,8"/>
<path class="st5" d="M685.8,178.1c0,0,3.8-2.7,1.3-6.3c-2.5-3.6-1.5-3-1.5-3s-5.5,4.7,0.6,9.7"/>
<path class="st0" d="M667.2,118.8c0,0,1.8-4.3-2.1-6.3c-3.9-2-1.5-2.6-1.5-2.6s-4.3,7.4,3.5,9L667.2,118.8z"/>
<path class="st0" d="M674.7,139c0,0,0.6-1.6-1.2-3.7c-2.2-2.5-2.9-2.2-2.9-2.2S668.4,139.6,674.7,139"/>
<path class="st0" d="M650.2,167.9"/>
<path class="st0" d="M653.6,174.3"/>
<path class="st0" d="M644.2,179.8c0,0,0.5-3.7-2.3-4.5c-2.8-0.8-1.3-1.5-1.3-1.5s-1.7,5.7,3.6,5.6"/>
<path class="st0" d="M674.1,164.5c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M633.9,172.1c0,0,3.7,0.5,4.5-2.2c0.8-2.8,1.5-1.3,1.5-1.3s-5.7-1.8-5.6,3.5"/>
<path class="st0" d="M683.7,189.5c1.1,0.8,4.7,1.4,4.7,1.4s-0.9-5.1-5.2-2"/>
<path class="st0" d="M610.1,163.2c0,0,0.6,3.9,3.8,3.8c3.2-0.1,1.9,1.1,1.9,1.1s0.1-6.3-5.5-4.5"/>
<path class="st5" d="M632.6,123.3c0,0-6.1-5.2,0.1-9.2c2.3,1.9,1.4,8.2,0.1,9.4L632.6,123.3z"/>
<path class="st0" d="M668.4,105.3c0,0-6.6-1.3-3.7-6.8c2.5,0.5,4.4,5.4,4,6.8L668.4,105.3z"/>
<path class="st0" d="M720.8,172.6c0,0,0.2,2.6,2.4,4.5c1.3,1.1,1.4,1.5,1.4,1.5s1.6-5.7-3.6-5.5"/>
<path class="st0" d="M680.5,100.9c0,0-0.8,3.1,2.1,3.9c2.9,0.8,1.4,1.5,1.4,1.5s1.8-5.7-3.7-5.6L680.5,100.9z"/>
<path class="st5" d="M679,110.5c0,0,6.7-0.1,5.1,5.9c-2.5,0.1-5.5-4.3-5.3-5.8L679,110.5z"/>
<path class="st0" d="M656.5,120.2c0,0,6.4-0.8,3.9-6.3c-3.6,1.5-3.4,2.1-3.8,5.3L656.5,120.2z"/>
<path class="st0" d="M711.6,118.1c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M724.9,111.7c0,0-2.5-0.5-4.9,1.1c-1.4,0.9-1.8,0.9-1.8,0.9s5.1,3.1,6.3-2"/>
<g>
<path class="st5" d="M693.1,123.3c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L693.1,123.3z"/>
</g>
<g>
<path class="st0" d="M721.1,143.1c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L721.1,143.1z"/>
</g>
<g>
<path class="st0" d="M686.5,138.1c0,0-5.5,1.3-3.2-4.2c2.1-0.9,3,2.6,3.1,3.3L686.5,138.1z"/>
</g>
<path class="st0" d="M705.5,154.4c0.9-1,0.5-2.3,0.3-2.7c-1-2.1-1.6-2.1-1.6-2.1s-2.8,4.1,1.7,4.9"/>
<path class="st0" d="M672.3,162.7c0,0,0.1-2.6-1.8-4.7c-1.1-1.2-1.2-1.6-1.2-1.6s-2.2,5.5,3,5.9"/>
<path class="st0" d="M620,147.8c0,0-2.2-4.7-5.8-1.4c2,2.4,2.5,2,5,1.6"/>
<path class="st0" d="M637.1,112.9c0,0,0.1,4.2,3.8,5.2c2.5,0.7,2,1.7,2,1.7s1.3-7.4-5.6-6.4"/>
<path class="st0" d="M646.9,200.1c0,0-2.5-0.3-4.8,1.4c-1.3,1-1.7,1-1.7,1s5.3,2.7,6.2-2.4"/>
<path class="st5" d="M640.5,143c0,0,2.7,5.4-2.2,8.8c-2.9-4,2-8.3,2-8.3s1.6-4.1,4.3-4.2c2.7,0,4.4-4.3,4.4-4.3s-3.3-2.5-4.9,2.8
c-6.6,4-6.1-1.1-6.1-1.1s-0.7-7.5-6.4-6.9c0.3,4.3,0.1,3.7,5.4,6.3c5.3,2.5-4.5-3-8.1,4.5c2.7,4.6,5.8-2.3,5.8-2.3"/>
<path class="st0" d="M618.8,137.3c0,0-5,2.8-5-2.3c0-1.5,0-1.2,0.5-2.9C615,133.2,616.7,136,618.8,137.3z"/>
<path class="st5" d="M706.5,147c0,0,3.7-1.3,1.2-5.6c-2.5-4.2-3.7-0.3-3.7-0.3s-1.4,5-6.4,3.3c2.6-7.4,6.3-4,6.3-4"/>
<path class="st5" d="M715.1,158.3"/>
<path class="st5" d="M682.7,164.5c0,0,0.1,6.8-5.9,5.1c-0.2-4.8,4-4.3,5.5-4.1"/>
<path class="st5" d="M665.4,143.9c0,0-0.7,2.9-8.6,2.1c-1.5-0.2-3.8-7.6,7.2-3c3.2,1.5,3.6-1.4,2.3-1c-1.2,0.4-8.2-6.8-4.4-9
c3.8-2.3,3.5-1.7,5.4-1.6c-2.5,4.8-4.7,7.6-4.7,7.6"/>
<path class="st0" d="M647.3,133.4c-0.3-1.2-1.6-0.8-1.6-0.8s-0.4-2.6-3.9-1.2c-0.4,0.1-2.3-0.3-2.3-0.3c0.4,1.1,1.7,2.6,3.6,2.7
c1.9,0.1,2.3-1.3,2.3-1.3l-1.4-2.2c0,0-1.8-2.9,1.6-3.6c1-0.1,2.3-0.9,2.3-0.9s1.4,1.9,0.5,3.1c-1,1.2-4.5-0.1-4.5-0.1"/>
<path class="st5" d="M662.5,190.7c0,0-2.5,7,4.5,7.3c0.5-6.4-3-6.1-4.6-6.5"/>
<path class="st0" d="M665.2,189.5c0,0-1.9,0.9-4.3-2.7c3.7,0.5,1.7-0.8,5.1,1.8C665.5,189.3,665.2,189.5,665.2,189.5z"/>
<path class="st5" d="M677.9,144.3c1.1,1.4,1.9,1.6,1.9,1.6s3.2,4.3,8,4.1c-0.6-2.5-1.5-4.1-4-4.9c-2.5-0.8-3.6,1-3.6,1l1.1,3.5
c0.6,4.6-5.9,5.3-5.9,5.3s-1.6-2.9,0.2-4.2c1.8-1.4,5.4,0.9,5.4,0.9"/>
<path class="st5" d="M676.5,183.1c0,0,4-5.5,6.9-0.8c-2.5,3.7-5.7-0.3-6.2-0.3"/>
<path class="st5" d="M661.4,179.2c0,0-3.7,0.3-3.3-7.1c3.5,1.9,5,2.6,5.4,6.7C662,179.3,661.4,179.2,661.4,179.2z"/>
<path class="st5" d="M665,150.9c-0.2,0.1,3.8-5.1,6.8-0.4C668.3,155.6,665,150.9,665,150.9C665.5,150.5,665.1,150.8,665,150.9z"/>
<path class="st0" d="M715.8,146.5c0.3,0.2,1.6,3.2-2.2,3.6C712.1,146.7,715.5,146.3,715.8,146.5z"/>
<path class="st0" d="M662.1,207.4c0,0,5.2-3.4,5.5,2.1c-4.4,1-5.7-1.7-5.7-1.7l-1.3-2.8c0,0-4.5-2-7.4,4.3c7.3,1.8,6.3-4.5,6.3-4.5
"/>
<path class="st5" d="M648.1,175.7c0,0,4-5.5,6.9-0.8c-2.7,6.5-3.6,0-6.1,0.7"/>
<path class="st0" d="M631.2,155.3c0,0-4.4,2-6.4-5.2c3.9,0.7,6.9,1.7,5.3,5.4"/>
<path class="st0" d="M674.4,161.7c0,0-0.6-4.9,6.9-4.5c-1.9,3.5-3.7,6-6.8,3.4"/>
<path class="st0" d="M646.3,171.9c0,0-1.9-4.5,5.3-6.3c-0.8,3.9-1.9,6.9-5.5,5.2"/>
<path class="st0" d="M648.3,195.4c0,0-4.7-1.2-1.7-8c2.6,3,4.3,5.7,0.7,7.6"/>
<path class="st0" d="M636.4,176.6c0,0-2.8,4-8.1-1.2c3.7-1.4,6.8-2,7.4,1.9"/>
<path class="st0" d="M626.7,133c-1.1-0.6-0.4-1.7-0.4-1.7s-2.4-1.1-0.1-4c0.2-0.4,0.3-2.3,0.3-2.3c1,0.7,2,2.3,1.7,4.2
c-0.4,1.8-1.8,1.9-1.8,1.9l-1.8-1.9c0,0-2.3-2.5-3.9,0.6c-0.3,1-1.5,2-1.5,2s1.4,1.9,2.9,1.3c1.5-0.6,1.1-4.4,1.1-4.4"/>
<path class="st0" d="M625.3,163.8c-1.1,0.5-1.6-0.8-1.6-0.8s-2.3,1.3-3.3-2.3c-0.2-0.4-1.7-1.6-1.7-1.6c1.1-0.4,3.1-0.2,4.3,1.1
c1.3,1.4,0.4,2.6,0.4,2.6l-2.6,0.3c0,0-3.4,0.4-1.8,3.5c0.6,0.8,0.7,2.4,0.7,2.4s2.4,0,2.7-1.6c0.4-1.5-2.9-3.5-2.9-3.5"/>
<path class="st0" d="M639.4,192.1c0,0-1.6,4-7.2,0.5c2.9-1.9,5.5-3,6.7,0.3"/>
<path class="st5" d="M697.3,107.4c0,0-3.4-1.5,0.7-7.8c2.1,3.3,3.1,4.7,1.4,8.5C697.8,107.8,697.3,107.4,697.3,107.4z"/>
<path class="st0" d="M738.1,110.1c0,0-1.5-5.6,2.5-4.8c-0.5,3.4-2.6,4.4-2.6,4.4s0-0.2-1.6,2c-2.2,3.1-0.2,2.4,2.2,2.9
c0.7-0.4,1.6-2.6,4.5,0.8c-3.1,2.2-4.3-0.6-4.5-0.8"/>
<polyline class="st5" points="720.4,128.7 722,133.2 724.2,133.2 "/>
<path class="st0" d="M668,189.7c0,0-1.5-1.4,1-4.9c0.8,3.7,1.3,1.3,0.1,5.4C668.3,189.9,668,189.7,668,189.7z"/>
<path class="st0" d="M696.9,170.2c1.3,0.9,2.1,0.8,2.1,0.8s3.9,2.7,7.9,1.1c-1.2-1.9-2.4-3-4.8-3c-2.3,0-2.8,1.9-2.8,1.9l2,2.6
c1.8,3.7-3.4,6.2-3.4,6.2s-2.2-1.9-1.1-3.6c1.1-1.7,4.8-0.8,4.8-0.8"/>
<path class="st0" d="M703.5,165.9c-0.1,0.1,2.1-5,5.4-1.8C707.2,169.1,703.5,165.9,703.5,165.9
C703.9,165.5,703.6,165.8,703.5,165.9z"/>
<path class="st0" d="M632.5,199.6c0,0.2-1.1-5.3,3.5-4.5C637.4,200.2,632.5,199.6,632.5,199.6C632.6,199.1,632.5,199.6,632.5,199.6
z"/>
</g>
</svg>
</div>
</div>
Related
Svg which uses greensock to convert it only with css use
I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>
Start css animation only when button clicked for multiple div overlapping each other
I have a few different content(div) overlapping each other in one place. I wanted to have a fade in animation when i click the trigger to show the desired content. But the animation is only play when the page is onload and would never play again if i trigger another content.
HTML code:
<div id="content">
<div class="content1 sq" id="square"></div>
<div class="content2 sq" id="square"></div>
<div class="content3 sq" id="square"></div>
</div>
CSS code:
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
Javascript:
var slideIndex = 1;
showDivs(slideIndex);
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("sq");
var dots = document.getElementsByClassName("click");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
x[slideIndex-1].style.visibility = "visible";
}
The code showed above is not the full code as the button to change to different content is through a SVG.
Please refer the link for the full code.
https://codepen.io/lemon55699/pen/bGVrMXz
If you only want to change the background color on click, then just get the fill color from clicked item and then apply the same background color on your square. like this.
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
var slideIndex = 1;
// showDivs(slideIndex);
// function currentDiv() {
// var element = this,
// style = getComputedStyle(element),
// top = style.getPropertyValue('color');
// }
$(document).ready(function(){
$('.click').click(function(){
var bgColor = $(this).css('fill');
$('#square').css('background-color' , bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.content1{
position: absolute;
top: 50px;
right: 10px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: green;
}
.content2{
position: absolute;
right: 10px;
top: 60px;
width: 180px;
height: 180px;
border: 3px solid yellow;
background-color: yellow;
}
.content3{
position: absolute;
right: 10px;
top: 70px;
width: 160px;
height: 160px;
border: 3px solid red;
background-color: red;
}
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<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 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 click" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 click" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 click" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 click" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 click" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 click" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 click" cx="267.39" cy="61.66" r="50" >
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 click" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 click" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq" id="square"></div>
</div>
but as you mentined in comment, if you want to change the whole square with its properties and text and other stuff, then do it something like this, you need to create a relation between the clicked item and the square box, and show only reated item and not others. Like this,
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
$(document).ready(function(){
$('.circle').click(function(){
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.sq{
position: absolute;
top: 50px;
right: 90px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: #00FF00;
opacity: 0;
text-align:center;
color: #fff;
font-size: 40px;
}
.sq.active {opacity:1;}
.sq.active{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<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 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">I am number 1</div>
<div class="content2 sq" id="square2">I am number 2</div>
<div class="content3 sq" id="square3">I am number 3</div>
<div class="content4 sq" id="square4">I am number 4</div>
<div class="content5 sq" id="square5">I am number 5</div>
<div class="content6 sq" id="square6">I am number 6</div>
<div class="content7 sq" id="square7">I am number 7</div>
<div class="content8 sq" id="square8">I am number 8</div>
<div class="content9 sq" id="square9">I am number 9</div>
</div>
I have changed some CSS properties for demo purpose, change these as per your need.
Is it possible to sequence the path animation
I have a html page which animates three svg paths all at once.
#keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
-webkit-animation: draw 19s normal linear forwards;
-moz-animation-name: draw 3s normal linear forwards;
-o-animation-name: draw 3s normal linear forwards;
animation-name: draw 3s normal linear forwards;
}
<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>
How can i sequence the animation i,e animating second path after completion of first path, third after second.
You can use animation-delay to get the sequence of animation
Stack Snippet
#keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
animation: draw 3s linear forwards;
}
.path:nth-child(2) {
animation-delay: 1s;
}
.path:nth-child(3) {
animation-delay: 2s;
}
<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>
Fade color in path tag
In HTML with SVG you can create a rect with fading color: <svg> <rect width="100%" height="100%"> <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" /> </rect> </svg> Now in my code I have a path like that: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)"> <!-- c->e --> <g id="a1124" class="edge"> <title>c->e</title> <path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" /> <polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" /> </g> </g> </svg> I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).
Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
How to animate stroke in svg image on hover
I'm trying to make a single stroke in my svg drawing to be highlighted on hover.
Is it possible to be done with css or do I need to use javascript?
Here's my html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g>/g></svg>
As you can see I tried 'animate' but it doesn't work.
I also tried css like here:
g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }
This makes the whole image to change color instead of a single line.
Here's live example:
http://www.ewelinawoloszyn.com/index11.html
Any suggestions are more than welcome. Many thanks in advance for your help.
You need to set the :hover state on the actual path element.
Also note that your SVG has a malformed closing <g> at the end.
svg {
margin-top: -200px;
/* demo positioning */
}
#Warstwa_1 path {
stroke-width: 2px;
/* for demo pusposes only */
transition: stroke .4s;
}
#Warstwa_1 path:hover {
stroke: red;
}
<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 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g></g></svg>
I had to add closing tag for .hi class and added
g#Warstwa_1_kopia {
display:block;
}
Then Paulie_D CSS worked.
for animation, you can use this code(CSS-animation) and modify according to your requirement
svg:hover path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke: blue;
}
}
here I apply hover effect on svg(tag).
and for more details about CSS-animation check the link.