I am trying to animate an SVG pattern and, once this has finished, to make a background image fading in.
Each of the two effect works fine separately. But when I combine them it looks like the timing is wrong.
I think the actual issue is the SVG being inside the div with opacity:0. This is used to make the background colour fade in, but it means that the SVG isn't not visible straight away.
Is a CSS only solution possible? Or do I need Javascript? And if so, could people make suggestion?
I have simplified the scenario by using a background colour instead of an image.
DEMO
HTML
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
CSS
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
}
.background-image.visible {
opacity: 1;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
You can use a pseudo-element on the background-image div to "underly" the SVG.
/* ========================================
Background animation
========================================= */
.container {
background: #242424;
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
position: relative;
}
.background-image::before {
content:"";
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background: #ff7701;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
z-index:0;
}
.background-image.visible {
opacity: 1;
}
svg {
position: relative;
z-index:2;
}
/* ========================================
SVG line animation
========================================= */
.path1 {
stroke-dasharray: 1100;
stroke-dashoffset: 1000;
-webkit-animation: dash 2.6s ease-in-out 1 forwards;
-moz-animation: dash 2.6s ease-in-out 1 forwards;
-o-animation: dash 2.6s ease-in-out 1 forwards;
-ms-animation: dash 2.6s ease-in-out 1 forwards;
animation: dash 2.6s ease-in-out 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 7s linear 1 forwards;
-moz-animation: dash 7s linear 1 forwards;
-o-animation: dash 7s linear 1 forwards;
-ms-animation: dash 7s linear 1 forwards;
animation: dash 7s linear 1 forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="background-image">
<svg xmlns="http://www.w3.org/2000/svg" width="4.125in" height="4.125in" viewBox="0 0 225 225" enable-background="new 0 0 225 225" xml:space="preserve">
<path class="path1" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 83.01,112.78
C 80.13,110.89 78.53,108.88 74.91,109.48
69.10,110.43 66.63,111.92 60.00,112.00
48.94,112.13 39.95,110.21 30.00,105.24
22.08,101.28 17.12,97.55 11.09,91.00
-5.19,73.30 -3.09,44.96 21.00,35.46
25.53,33.68 29.17,33.06 34.00,33.00
34.00,33.00 42.00,33.00 42.00,33.00
65.38,33.11 94.95,52.94 95.86,78.00
95.86,78.00 95.86,87.79 95.86,87.79
96.74,90.83 107.85,97.10 111.00,96.77
113.91,96.47 131.24,86.30 135.00,84.15
135.00,84.15 175.00,61.72 175.00,61.72
175.00,61.72 197.00,49.54 197.00,49.54
199.00,49.06 200.95,48.98 203.00,49.54
206.31,50.06 220.39,57.00 222.49,59.39
224.65,61.85 224.86,64.95 223.42,67.83
221.71,71.24 216.08,75.02 213.00,77.42
213.00,77.42 189.00,96.21 189.00,96.21
189.00,96.21 158.00,121.00 158.00,121.00
158.00,121.00 211.00,162.00 211.00,162.00
215.82,165.82 227.04,172.63 223.65,179.96
221.02,185.63 204.19,193.06 198.00,191.58
194.20,190.68 180.34,182.28 176.00,179.86
176.00,179.86 129.00,153.58 129.00,153.58
129.00,153.58 112.00,144.48 112.00,144.48
108.46,143.69 104.88,146.43 102.00,148.20
100.01,149.43 97.21,150.98 96.08,153.18
95.33,155.06 96.06,160.46 96.08,163.00
94.65,195.43 49.20,216.66 21.00,205.54
-2.05,196.45 -5.56,170.04 9.33,152.00
13.99,146.35 19.64,141.51 26.00,137.87
35.41,132.49 46.10,129.13 57.00,129.00
61.84,128.95 64.21,128.97 69.00,130.02
71.29,130.51 74.83,131.83 77.00,131.41
79.40,130.95 93.33,121.95 96.00,120.00
90.59,117.66 87.91,115.98 83.01,112.78 Z" />
<path class="path" fill="none" stroke="#777" stroke-width="2" stroke-miterlimit="10" d="M 24.39,77.00
C 31.85,86.49 45.08,92.23 57.00,92.91
73.88,93.87 82.98,81.16 71.61,67.01
62.56,55.75 45.99,50.77 32.00,52.33
18.86,55.56 16.47,66.93 24.39,77.00 Z
M 200.00,56.85
C 197.43,57.19 193.36,59.83 191.00,61.14
191.00,61.14 174.00,70.70 174.00,70.70
174.00,70.70 132.00,94.23 132.00,94.23
132.00,94.23 106.31,108.95 106.31,108.95
101.86,112.92 105.65,119.35 102.98,123.62
101.30,126.31 87.52,133.97 84.00,136.00
85.26,137.76 86.46,139.43 88.04,140.93
96.89,149.27 104.59,133.88 114.00,134.15
117.55,134.25 121.41,136.98 125.00,136.08
128.08,135.32 141.52,124.13 145.00,121.42
145.00,121.42 191.00,85.42 191.00,85.42
197.76,80.15 212.09,69.93 217.00,64.00
213.31,61.90 204.00,56.30 200.00,56.85 Z
M 84.00,105.00
C 84.00,105.00 97.00,112.00 97.00,112.00
97.00,112.00 102.00,101.00 102.00,101.00
93.71,97.01 92.07,93.74 84.00,105.00 Z
M 122.00,127.67
C 114.71,129.21 108.56,119.25 118.04,113.74
129.83,111.26 130.70,125.83 122.00,127.67 Z
M 128.00,143.00
C 128.00,143.00 128.00,145.00 128.00,145.00
128.00,145.00 180.00,173.77 180.00,173.77
184.28,176.10 196.95,184.22 201.00,184.22
204.16,184.22 212.10,179.40 217.00,178.00
213.97,172.12 202.59,164.68 197.00,160.35
197.00,160.35 152.00,125.00 152.00,125.00
152.00,125.00 128.00,143.00 128.00,143.00 Z
M 23.64,165.00
C 14.52,177.77 22.36,188.83 37.00,189.00
49.93,189.15 64.52,183.87 72.36,173.00
73.60,171.28 74.78,168.98 75.53,167.00
80.95,152.85 66.47,147.32 55.00,148.29
43.19,150.09 30.86,154.88 23.64,165.00 Z" />
</svg>
<div/>
<div/>
Related
I have the following script that plays my SVGs when they scroll into view (i have several of these SVGs on the page). This works perfectly but only in Firefox! Is this the correct way to do it or is there a better code that will work on other browsers? Ideally, if it can't work on IE, and i am expecting this, then the SVG would just appear like an image and not animated. But i would expect it to work in all other browsers!
<div id="arrow-2id" class="arrow-2 leftarrows">
<!--START ARROW 2-->
<svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044">
<script type="text/javascript">
var diva2 = document.getElementById("arrow-2id");
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
diva2.classList.add("play");
}
}
);
</script>
<mask id="arrow2-mask1" maskUnits="userSpaceOnUse">
<path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/>
</mask>
<mask id="arrow2-mask2" maskUnits="userSpaceOnUse">
<path d="M-3.696,293.63
c130.667-12.167,130.667,23.5,58.5-89.5"/>
</mask>
<path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45
c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181
c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301
c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646
c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687
C91.345,270.88,88.917,283.693,74.443,277.599z"/>
<path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996
c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771
c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656
L74.443,277.599z"/>
</svg>
<style>
.play #arrow2-mask1 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 478.362 478.362;
stroke-dashoffset: 0;
animation: brush2a 2s linear ;
animation-fill-mode: forwards;
}
.play #arrow2-mask2 path {
fill: none;
stroke: white;
stroke-width: 29;
stroke-dasharray: 203.128 203.128;
stroke-dashoffset: 0;
animation: brush2b 2s linear ;
animation-fill-mode: forwards;
}
#keyframes brush2a {
0% { stroke-dashoffset: 478.362; }
25% { stroke-dashoffset: 478.362; }
75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
#keyframes brush2b {
0% { stroke-dashoffset: 203.128; }
80% { stroke-dashoffset: 203.128; }
100% { stroke-dashoffset: 0; }
}
</style>
<!--END ARROW 2-->
</div>
My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over.
My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/
If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over.
Is there some way i can let it fill once the animation is over?
HTML:
<div class="photoshop">
<svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg>
</div>
CSS:
.photoshop {
height: 100px;
width: 100px;
opacity: 0;
}
.js-photoshop-animate{
opacity: 1;
}
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
100% {
stroke-dashoffset: 0;
}
}
/* Style */
#mySVG * {
fill-opacity: 0;
transition: fill-opacity 1s;
}
#mySVG finished * {
fill-opacity: 1;
}
JAVASCRIPT:
var $photoshop = $('.photoshop');
$photoshop.waypoint(function(){
console.log('Waypoint!');
$photoshop.addClass('js-photoshop-animate rzzhgcav_0');
}, {offset: '90%'} );
/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
obj.el.classList.add('finished');
});
Include multiple attributes in your animation, leave off the transition:
Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe:
If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.
.rzzhgcav_0 {
stroke-dasharray: 27046 27048;
stroke-dashoffset: 27047;
animation: rzzhgcav_draw_0 5000ms 0ms forwards;
}
#keyframes rzzhgcav_draw_0 {
0% {
stroke-dashoffset: 27047;
fill-opacity: 0
animation-timing-function: ease-in-out
}
50% {
fill-opacity: 0
animation-timing-function: linear
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1
}
}
When I open my website in Microsoft Edge, Everything looks mostly okay, except that the left-hand side of the logo does not keep time with the right-hand side -- the B comes in nice and smooth, but the S is slightly behind in timing and very jerky. Refreshed several times and it is always exactly the same. Also, if I scroll down and back up to the top in Edge, the S is sometimes only partly drawn (i,e. the bottom of it is missing) even though it was drawn completely when I first open the page.
#keyframes bounce-in {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#logo {
animation: bounce-in 700ms ease-in-out forwards;
margin-bottom: 20px;
max-height: 70vh;
}
.s {
transform-origin: 50% 50%;
stroke-dasharray: 128px;
stroke-dashoffset: -128px;
animation: draw-s 1500ms 500ms forwards;
}
.b-back {
transform-origin: 50% 50%;
stroke-dasharray: 93px;
stroke-dashoffset: -93px;
animation: draw-b-back 1500ms 500ms forwards;
}
.b-front-2 {
transform-origin: 50% 50%;
stroke-dasharray: 124px;
animation: draw-b-front 1500ms 500ms forwards;
transform: translateX(-0.2px);
}
.logo-shadow {
opacity: 0;
animation: draw-shadow 1s ease 1500ms forwards;
}
#keyframes draw-s {
from {
stroke-dashoffset: 128px;
}
to {
stroke-dashoffset: 0px;
}
}
#keyframes draw-b-back {
from {
stroke-dashoffset: 93px;
}
to {
stroke-dashoffset: 0px;
}
}
#keyframes draw-b-front {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 124px;
}
}
#keyframes draw-shadow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 120.8">
<style>
.logo-circle {
fill: #3BB383;
}
.logo-shadow {
fill: #349F74;
}
.logo-text {
fill: none;
stroke: #FFFFFF;
stroke-width: 8;
stroke-miterlimit: 10;
}
.logo-text-2 {
fill: none;
stroke: #3BB383;
stroke-width: 9;
stroke-miterlimit: 10;
}
</style>
<path class="logo-circle" d="M117.8 60.3c.1 31.1-25.1 56.4-56.3 56.5-31.1.1-56.4-25.1-56.5-56.3C4.9 29.4 30.1 4.1 61.3 4c31.1-.1 56.4 25.1 56.5 56.3z" />
<path class="logo-shadow" d="M117.4 53.6L84.5 20.7l-.8.8c-5.2-5.7-13.3-9.7-22.1-9.7-15.8 0-28.4 12.1-28.4 26.5 0 8.9-.1 17.7 7.3 22.4L39 66.2c.5.5 1 1.1 1.4 1.9 1.9 3.9 7.4 5.5 10.2 8.8 4.3 5 4.5 11.6 4.4 17.8-.1 8.2-11.4 9.1-13.9 2.7-.6-.7-1-1.5-1.2-2.4-1.1 2.4-1.4 5.8-4.2 5.9l14.8 14.9c3.5.7 7.2 1 10.9 1 31.1-.1 56.3-25.4 56.3-56.5.1-2.3-.1-4.5-.3-6.7z"
/>
<path class="logo-text s" d="M60.6 15.8c-12 0-27.7 10.6-27.7 29.3C32.9 64 52.3 72 55.6 84.5c3 11.3-2 16.3-5 17.3-6 2-12-3-14-6" />
<path class="logo-text b-front" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text-2 b-front-2" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text b-back" d="M66.6 14.6v92.2" />
</svg>
Also, the graph/circle animations work, but they don't do exactly the same thing as they do in Chrome. In Chrome the circles do a full 360 degrees before coming to their final positions, in Edge they just go from the top to their final position (i.e. only turn 270°, 180° or 90°).
.graph {
margin: 20px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: 628px;
stroke-dashoffset: -628px;
transform-origin: center;
}
.graph-25 {
animation: graph-25 1000ms ease forwards;
}
.graph-50 {
animation: graph-50 1000ms ease forwards;
}
.graph-75 {
animation: graph-75 1000ms ease forwards;
}
#keyframes graph-25 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 157px;
transform: rotate(0deg);
}
}
#keyframes graph-50 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 314px;
transform: rotate(0deg);
}
}
#keyframes graph-75 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 471px;
transform: rotate(0deg);
}
}
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<div class="large-4 column align">
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line ps graph-75" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large-4 column align">
<svg width="250" height="250" class="graph illustrator">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#EA954A" />
<circle class="graph-line ai graph-50" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large- column align">
<svg width="250" height="250" class="graph sketch">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#F4D24B" />
<circle class="graph-line sk graph-25" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
Anyone know how to fix these issues?
Here's the website: http://seanbaines.com
I have this code for animations using HTML5, CSS3 Animations and SVG
line. It’s only working in Chrome, Opera and Firefox and not working
in IE and Safari. Any solution?
Here is the code:
.line {
width: 65%;
margin: 0 auto;
}
#svg path.path {
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation: lines 5s linear forwards;
-moz-animation: lines 5s linear forwards;
-ms-animation: lines 5s linear forwards;
-0-animation: lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I want fix it by making it work in IE and Safari. Please, if possible
in HTML5, CSS and SVG only.
Mozilla Devloper Network - SVG Animation - Browser Compatibility says
Internet Explorer
Not supported
Then use FakeSMIL
Refer this FakeSmile with IE9
Refer this http://jsfiddle.net/whyoz/c3wb5sbr/
function registerAnimation(anim) {
var targets = getTargets(anim);
var elAnimators = new Array();
for(var i=0; i<targets.length ;i++) {
var target = targets[i];
var animator = new Animator(anim, target, i);
animators.push(animator);
elAnimators[i] = animator;
}
anim.animators = elAnimators;
var id = anim.getAttribute("id");
if (id)
id2anim[id] = anim;
for(var i=0; i<elAnimators.length ;i++)
elAnimators[i].register();
}
var svg = document.getElementsByTagName('svg')[0];
.......
var animation = document.createElementNS(
"http://www.w3.org/2000/svg", "animate");
.......
.......
registerAnimation(animation);
animation.beginElement();
Which could bring animation for SVG in IE
Refer MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
Example http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html
I'm having a heck of a time trying to begin the animation when it appears in the viewport. I've searched through previously asked questions here on stack overflow, but I can't seem to figure how to adapt the JS to fit my needs. My latest attempt was to try and just make the pink line begin its animation when it appeared in the viewport... as I imagine once that works, I can apply to the rest of the items. Please let me know if you need anything else. Any ideas? codepen
SVG
<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">
<path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>
<path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>
<path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>
<path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>
<path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>
</svg>
CSS
.pink-stroke {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.pinkAnimation {
fill:none;
stroke:#E199C3;
stroke-width:40;
stroke-linecap:round;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
.purple-stroke{
fill:none;
stroke:#9E70B0;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.green-stroke{
fill:none;
stroke:#21B585;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: -1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:1.25s;
animation-delay:1.25s;
}
.red-stroke{
fill:none;stroke:#E9706C;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.85s;
animation-delay:.85s;
}
.yellow-stroke {
fill:none;
stroke:#EFEF99;
stroke-width:40;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
-webkit-animation-delay:.45s;
animation-delay:.45s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
JS
var onAppear = [];
document.addEventListener("DOMContentLoaded", function() {
onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
return item;
});
}, false);
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
elem.classList.add(".pinkAnimation");
elem.classList.remove(".pink-stroke")
} else {
elem.classList.remove("pinkAnimation");
elem.classList.add ('.pink-stroke')
}
});
}, false);
I was able to figure this one out... I'm sure there are better options, but it works. I used the following script and updated the corresponding CSS styles to match. Here is the updated codepen.
JS
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
$("#pink").attr("class", "pink-stroke dash-pink");
$("#yellow").attr("class", "yellow-stroke dash-yellow");
$("#red").attr("class", "red-stroke dash-red");
$("#purple").attr("class", "purple-stroke dash-purple");
$("#green").attr("class", "green-stroke dash-green");
} else {
$("#pink").attr("class", "pink-stroke");
$("#yellow").attr("class", "yellow-stroke");
$("#red").attr("class", "red-stroke");
$("#purple").attr("class", "purple-stroke");
$("#green").attr("class", "green-stroke");
}
});