Related
what do I need to include to make a white trail following it? I tried adding 10 spans and giving them the same path and delaying each one but it looked so off.
.container{
width: 100vw;
height: 100vh;
background: gray;
}
.orb{
background: #00fff9;
offset-path: path(
"M257.004 129.794C321.128 129.794 380.697 139.056 425.611 154.622C479.727 173.378 513 201.806 513 227.548C513 254.373 477.738 284.575 419.624 303.958C375.689 318.612 317.874 326.262 257.004 326.262C194.596 326.262 135.5 319.081 91.0694 303.797C34.8572 284.455 1 253.863 1 227.548C1 202.015 32.7685 173.806 86.1237 155.079C131.206 139.257 192.246 129.794 256.996 129.794H257.004Z"
);
box-shadow: 0 0 10px #00fff9,
0 0 20px #00fff9,
0 0 30px #00fff9,
0 0 40px #00fff9,
0 0 50px #00fff9,
0 0 60px #00fff9,
0 0 70px #00fff9,
0 0 80px #00fff9,
0 0 90px #00fff9;
border-radius: 50%;
width: 20px;
height: 20px;
animation: move 10s linear infinite;
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<div class="container">
<div class="orb">
</div>
</div>
Here's an implementation that uses SVG <animateMotion> instead of CSS offset-path. (The path data might look a bit different, but they are basically the same.)
The trail is done with a stroke-dashoffset animation. The path gets the pathLength="100", and is then drawn ten times, each with a stroke-dasharray="2 98". That way, only a dash with a length of 2 of 100 along the path is drawn.
Then, each of the ten copies of the path gets a fading opacity, and its stroke-dashoffset is animated such that they are positioned one behind the other and moving behind the glowing orb. That part gets admitedly a bit verbose, as you need to write an individual animation rule for each of the copies. The combination of them all is then blured to smooth it.
For the orb, a custom SVG filter is used, since the drop-shadow property can't be used directly for SVG grafics.
svg {
background-color: grey;
overflow: visible;
width: 100vw;
height: 100vh;
}
.orb {
fill: #00fff9;
}
.orb :first-child {
filter: url(#glow);
}
.trail {
filter: blur(4px);
}
.trail use {
fill: none;
stroke: white;
stroke-width: 10;
stroke-dasharray: 2 98;
}
.trail :nth-child(1) {
animation: trail1 10s linear infinite;
stroke-opacity: 0.5;
}
#keyframes trail1 {
from {stroke-dashoffset: 2}
to {stroke-dashoffset: -98}
}
.trail :nth-child(2) {
animation: trail2 10s linear infinite;
stroke-opacity: 0.45;
}
#keyframes trail2 {
from {stroke-dashoffset: 4}
to {stroke-dashoffset: -96}
}
.trail :nth-child(3) {
animation: trail3 10s linear infinite;
stroke-opacity: 0.4;
}
#keyframes trail3 {
from {stroke-dashoffset: 6}
to {stroke-dashoffset: -94}
}
.trail :nth-child(4) {
animation: trail4 10s linear infinite;
stroke-opacity: 0.35;
}
#keyframes trail4 {
from {stroke-dashoffset: 8}
to {stroke-dashoffset: -92}
}
.trail :nth-child(5) {
animation: trail5 10s linear infinite;
stroke-opacity: 0.3;
}
#keyframes trail5 {
from {stroke-dashoffset: 10}
to {stroke-dashoffset: -90}
}
.trail :nth-child(6) {
animation: trail6 10s linear infinite;
stroke-opacity: 0.25;
}
#keyframes trail6 {
from {stroke-dashoffset: 12}
to {stroke-dashoffset: -88}
}
.trail :nth-child(7) {
animation: trail7 10s linear infinite;
stroke-opacity: 0.2;
}
#keyframes trail7 {
from {stroke-dashoffset: 14}
to {stroke-dashoffset: -86}
}
.trail :nth-child(8) {
animation: trail8 10s linear infinite;
stroke-opacity: 0.15;
}
#keyframes trail8 {
from {stroke-dashoffset: 16}
to {stroke-dashoffset: -84}
}
.trail :nth-child(9) {
animation: trail9 10s linear infinite;
stroke-opacity: 0.1;
}
#keyframes trail9 {
from {stroke-dashoffset: 18}
to {stroke-dashoffset: -82}
}
.trail :nth-child(10) {
animation: trail10 10s linear infinite;
stroke-opacity: 0.05;
}
#keyframes trail10 {
from {stroke-dashoffset: 20}
to {stroke-dashoffset: -80}
}
<svg viewBox="-10 110 550 240">
<defs>
<filter id="glow" x="-1" y="-1" width="3" height="3">
<feGaussianBlur stdDeviation="12"/><!-- defines how blured the glow is -->
<feComponentTransfer>
<feFuncA type="linear" slope="3"/><!-- defines how bright the glow is -->
</feComponentTransfer>
</filter>
<path id="ellipse" pathLength="100" d="M257 130A256 98 0 1 1 257 326 256 98 0 1 1 257 130Z" />
</defs>
<g class="trail">
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
</g>
<g class="orb">
<circle r="12"/><!-- defines how wide the glow is -->
<circle r="10"/>
<animateMotion dur="10s" repeatCount="indefinite">
<mpath href="#ellipse"/>
</animateMotion>
</g>
</svg>
You could write the trail animation also with <animate>. It would look like this:
<use href="#ellipse">
<animate attributeName="stroke-dashoffset"
dur="10s" repeatCount="indefinite"
from="2" to="-98" />
</use>
Which variant you use is a matter of taste.
Edit: Generalization
The above code depends on a linear movement of the orb along the path. How would you solve this with different easings? I started to explore that and found the only realistic approach is to draw the trail frame-by-frame from Javascript. An example can be found in this Codepen.
I have an svg animation, I want to be able to stop/pause the animation on click but I can't figure out how and I need help, I tried to toggle but I think I have to toggle each line which I don't know how to.
<div class="loader">
<svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
<path id="Line_1" class="t" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
<path id="Line_1" class="t" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
<path id="Line_1" class="t" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
<path id="Line_1" class="t" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
<path id="Line_1" class="t" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
<path id="Line_1" class="t" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
<path id="Line_1" class="t" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
<path id="Line_1" class="t" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
<path id="Line_1" class="t" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
</svg>
</div>
css
.loader {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#wave {
height: 70px;
width: 70px;
fill: black;
}
#wave.stop {
animation-play-state: paused;
}
#Line_1 {
animation: pulse 1s infinite;
animation-delay: 0.15s;
}
#Line_2 {
animation: pulse 1s infinite;
animation-delay: 0.3s;
}
#Line_3 {
animation: pulse 1s infinite;
animation-delay: 0.45s;
}
#Line_4 {
animation: pulse 1s infinite;
animation-delay: 0.6s;
}
#Line_5 {
animation: pulse 1s infinite;
animation-delay: 0.75s;
}
#Line_6 {
animation: pulse 1s infinite;
animation-delay: 0.9s;
}
#Line_7 {
animation: pulse 1s infinite;
animation-delay: 1.05s;
}
#Line_8 {
animation: pulse 1s infinite;
animation-delay: 1.2s;
}
#Line_9 {
animation: pulse 1s infinite;
animation-delay: 1.35s;
}
js
var vawe = document.getElementById("vawe")
vawe.addEventListener('click',function() {
vawe.classList.toggle('stop');
})
when I click on the svg I want to stop pause the animation, so that the music stop, and then click again the animation starts again.
#wave.stop {
animation-play-state: paused;
}
Doesn't apply the animation-play-state to the actually animated (line) elements.
The css rule should rather look something like this:
#wave.stop .t {
animation-play-state: paused;
}
I also recommend to use class selectors to avoid unnecessarily high specificity
(introduced by id selectors in your css rules).
var wave = document.getElementById("wave")
wave.addEventListener('click', function(e) {
e.currentTarget.classList.toggle('stop');
})
.loader {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#wave {
height: 10em;
fill: black;
}
.stop {
border: 1px solid red;
}
.stop .t {
animation-play-state: paused;
}
.t {
transform-origin: center;
animation: pulse 1s infinite forwards;
transform: scale(1, 0.5)
}
.Line_1 {
animation-delay: 0.15s;
}
.Line_2 {
animation-delay: 0.3s;
}
.Line_3 {
animation-delay: 0.45s;
}
.Line_4 {
animation-delay: 0.6s;
}
.Line_5 {
animation-delay: 0.75s;
}
.Line_6 {
animation-delay: 0.9s;
}
.Line_7 {
animation-delay: 1.05s;
}
.Line_8 {
animation-delay: 1.2s;
}
.Line_9 {
animation-delay: 1.35s;
}
#keyframes pulse {
0% {
transform: scale(1, 0.5)
}
50% {
transform: scale(1, 1)
}
100% {
transform: scale(1, 0.5)
}
}
<div class="loader">
<svg class="wave" id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
<path id="Line_1" class="t Line_1" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
<path id="Line_2" class="t Line_2" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
<path id="Line_3" class="t Line_3" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
<path id="Line_4" class="t Line_4" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
<path id="Line_5" class="t Line_5" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
<path id="Line_6" class="t Line_6" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
<path id="Line_7" class="t Line_7" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
<path id="Line_8" class="t Line_8" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
<path id="Line_9" class="t Line_9" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
</svg>
</div>
Since the delay is required on resume, try this JavaScript alternative. The animation property of the element is individually set or unset depending upon the state.
let el = document.getElementById("vawe")
el.addEventListener('click', (e) => {
let value = 'unset';
if ( e.currentTarget.classList.contains('stop') ) {
e.currentTarget.classList.remove('stop');
value = 'pulse 1s infinite';
} else {
e.currentTarget.classList.add('stop');
}
e.currentTarget.childNodes.forEach(child => {
child.style.setProperty('animation-name', value);
});
});
I have a tough question! I have several SVG graphics on some of my pages which play when the page loads. But because many of them are below the fold, I would like them to start playing (and play once) when they scroll into view.
NOTE: I have searched everywhere for a solution and even hired a freelancer who couldn't make it work. The difference with my SVGs I think is that they use #keyframe and have more than one path that play in sequence which may be why other solutions do not work? The reason for more than one path is that it is a calligraphic arrow shape that overlaps when revealed by the SVG mask.
My HTML for one of the SVGs (inside a DIV to make it responsive):
<div id="arrow-1id" class="arrow-1 leftarrows">
<!--START ARROW 1-->
<svg id="arrow1svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.55 256.959">
<mask id="arrow1-mask1" maskUnits="userSpaceOnUse">
<path d="M4.537,54.288
c96.333-80.667,213.667,135.333,90.667,96.333"/>
</mask>
<mask id="arrow1-mask2" maskUnits="userSpaceOnUse">
<path d="M100.87,156.955
c-29.667-100.667,29.666-152,78.333-146.667s151.667,255.667,29.667,234"/>
</mask>
<mask id="arrow1-mask3" maskUnits="userSpaceOnUse">
<path d="M214.87,248.956
c-53.667-43.667,15.334-337.334,195.667-169.667"/>
</mask>
<mask id="arrow1-mask4" maskUnits="userSpaceOnUse">
<path d="M322.203,53.955c108.667,43,117,69.09,68-53.955"/>
</mask>
<path mask="url(#arrow1-mask1)" fill="#42A8FC" d="M98.168,50.639C66.146,29.84,27.535,21.405,0.142,44.781c-1.983,1.692,17.501,16.275,21.915,12.509
c21.17-18.066,49.736-15.119,72.854-0.936c11.126,6.518,19.094,15.658,19.094,15.658c8.426,9.078,14.961,19.84,18.385,31.416
c4.701,15.891,0.705,30.535-10.91,41.153c-0.855,0.782-1.803,1.409-2.783,1.981c-0.01,0.004-6.326,4.56-16.162,2.465l-6.889,7.466
c9.913,8.681,22.827,13.119,36.498,7.999c43.123-16.156,23.759-65.003-14.488-98.967C117.654,65.526,108.286,57.122,98.168,50.639z"/>
<path mask="url(#arrow1-mask2)" fill="#42A8FC" d="M231.959,50.614c-17.516-25.197-43.061-49.605-73.761-50.592c-20.618-0.664-34.757,13.81-44.931,27.774
c-5.189,7.124-10.349,14.789-15.1,22.843l-3.258,5.715C84.467,75.328,76.75,96.273,76.766,117.7
c0.01,13.138,7.45,28.785,18.879,38.794l6.889-7.466c-0.658-1.355-1.329-2.721-1.771-4.061
c-7.573-22.907,0.716-49.699,13.241-72.955l3.65-6.486c7.376-12.557,15.713-23.818,23.057-32.426
c8.87-10.398,23.658-23.112,40.648-19.129c14.01,3.285,24.33,19.391,31.584,30.21c3.548,5.288,7.105,11.241,10.578,17.655
l12.133,25.446c22.227,53.15,32.844,122.106-8.789,151.369c-3.873,2.722-8.496,4.636-12.935,6.029l-3.878,7.245
c25.657,15.113,52.242-6.228,60.439-31.938c14.138-44.338-1.676-101.902-24.266-145.678
C246.227,74.311,238.632,60.523,231.959,50.614z"/>
<path mask="url(#arrow1-mask3)" fill="#42A8FC" d="M406.734,68.147c-17.148-17.841-37.951-33.412-59.953-44.124c-50.594-24.632-88.095-5.991-114.822,26.591
l-8.438,11.223c-3.395,4.914-6.599,10.027-9.592,15.281c-17.29,30.335-29.316,64.641-31.375,100.486
c-1.105,19.22-1.053,44.238,13.145,61.586c4.664,5.7,9.492,9.873,14.354,12.736l3.878-7.245c-3.323-4.796-5.046-11.189-6.378-16.149
c-5.317-19.783-3.871-40.435-0.658-59.469c4.553-26.978,14.076-56.253,28.76-81.78l9.521-14.934
c8.408-11.894,18.098-22.568,29.177-31.183c41.766-32.474,90.141-8.049,122.342,30.429
C404.036,81.622,413.766,75.922,406.734,68.147z"/>
<path mask="url(#arrow1-mask4)" fill="#42A8FC" d="M404.413,71.956c0,0-3.166,0-12.344-3.026c-17.545-5.735-35.092-11.471-52.635-17.206
c-15.207-4.971-15.507,16.587-1.976,21.011c27.503,8.99,55.004,17.981,82.506,26.972c9.534,3.115,13.706-5.336,11.287-12.662
c-8.52-25.797-17.039-51.594-25.558-77.392c-4.546-13.767-25.338-10.047-20.597,4.315c5.671,17.17,11.341,34.342,17.013,51.514
L404.413,71.956z"/>
</svg>
<style>
#arrow1-mask1 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 265.809 265.809;
stroke-dashoffset: 0;
animation: brush1a 2s linear;
animation-fill-mode: forwards;
}
#arrow1-mask2 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 499.444 499.444;
stroke-dashoffset: 0;
animation: brush1b 2s linear;
animation-fill-mode: forwards;
}
#arrow1-mask3 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 396.144 396.144;
stroke-dashoffset: 0;
animation: brush1c 2s linear;
animation-fill-mode: forwards;
}
#arrow1-mask4 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 195.971 195.971;
stroke-dashoffset: 0;
animation: brush1d 2s linear;
animation-fill-mode: forwards;
}
#keyframes brush1a {
0% {
stroke-dashoffset: 265.809;
}
1% {
stroke-dashoffset: 265.809;
}
20% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1b {
0% {
stroke-dashoffset: 499.444;
}
20% {
stroke-dashoffset: 499.444;
}
60% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1c {
0% {
stroke-dashoffset: 396.144;
}
60% {
stroke-dashoffset: 396.144;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1d {
0% {
stroke-dashoffset: 195.971;
}
80% {
stroke-dashoffset: 195.971;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<!--END ARROW 1-->
</div>
I haven't posted any JS because none of the code I have tried works.
You can achieve that by running the animation if the container #arrow-1id as a specific class (lets say .play). Then you just check with javascript when the container appear in the screen. When it's the case, just add the .play class to the container:
var body = document.getElementsByTagName("body")[0];
var div = document.getElementById("arrow-1id");
body.onscroll = function() {
if (document.documentElement.scrollTop >= div.offsetTop - 200) {
div.classList.add("play");
}
};
body {
height: 2000px;
}
#arrow-1id {
margin-top: 400px;
background-color: lightgrey;
}
.play #arrow1-mask1 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 265.809 265.809;
stroke-dashoffset: 0;
animation: brush1a 2s linear;
animation-fill-mode: forwards;
}
.play #arrow1-mask2 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 499.444 499.444;
stroke-dashoffset: 0;
animation: brush1b 2s linear;
animation-fill-mode: forwards;
}
.play #arrow1-mask3 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 396.144 396.144;
stroke-dashoffset: 0;
animation: brush1c 2s linear;
animation-fill-mode: forwards;
}
.play #arrow1-mask4 path {
fill: none;
stroke: white;
stroke-width: 39;
stroke-dasharray: 195.971 195.971;
stroke-dashoffset: 0;
animation: brush1d 2s linear;
animation-fill-mode: forwards;
}
#keyframes brush1a {
0% {
stroke-dashoffset: 265.809;
}
1% {
stroke-dashoffset: 265.809;
}
20% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1b {
0% {
stroke-dashoffset: 499.444;
}
20% {
stroke-dashoffset: 499.444;
}
60% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1c {
0% {
stroke-dashoffset: 396.144;
}
60% {
stroke-dashoffset: 396.144;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes brush1d {
0% {
stroke-dashoffset: 195.971;
}
80% {
stroke-dashoffset: 195.971;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="arrow-1id" class="arrow-1 leftarrows">
<!--START ARROW 1-->
<svg id="arrow1svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.55 256.959">
<mask id="arrow1-mask1" maskUnits="userSpaceOnUse">
<path d="M4.537,54.288
c96.333-80.667,213.667,135.333,90.667,96.333" />
</mask>
<mask id="arrow1-mask2" maskUnits="userSpaceOnUse">
<path d="M100.87,156.955
c-29.667-100.667,29.666-152,78.333-146.667s151.667,255.667,29.667,234" />
</mask>
<mask id="arrow1-mask3" maskUnits="userSpaceOnUse">
<path d="M214.87,248.956
c-53.667-43.667,15.334-337.334,195.667-169.667" />
</mask>
<mask id="arrow1-mask4" maskUnits="userSpaceOnUse">
<path d="M322.203,53.955c108.667,43,117,69.09,68-53.955" />
</mask>
<path mask="url(#arrow1-mask1)" fill="#42A8FC" d="M98.168,50.639C66.146,29.84,27.535,21.405,0.142,44.781c-1.983,1.692,17.501,16.275,21.915,12.509
c21.17-18.066,49.736-15.119,72.854-0.936c11.126,6.518,19.094,15.658,19.094,15.658c8.426,9.078,14.961,19.84,18.385,31.416
c4.701,15.891,0.705,30.535-10.91,41.153c-0.855,0.782-1.803,1.409-2.783,1.981c-0.01,0.004-6.326,4.56-16.162,2.465l-6.889,7.466
c9.913,8.681,22.827,13.119,36.498,7.999c43.123-16.156,23.759-65.003-14.488-98.967C117.654,65.526,108.286,57.122,98.168,50.639z" />
<path mask="url(#arrow1-mask2)" fill="#42A8FC" d="M231.959,50.614c-17.516-25.197-43.061-49.605-73.761-50.592c-20.618-0.664-34.757,13.81-44.931,27.774
c-5.189,7.124-10.349,14.789-15.1,22.843l-3.258,5.715C84.467,75.328,76.75,96.273,76.766,117.7
c0.01,13.138,7.45,28.785,18.879,38.794l6.889-7.466c-0.658-1.355-1.329-2.721-1.771-4.061
c-7.573-22.907,0.716-49.699,13.241-72.955l3.65-6.486c7.376-12.557,15.713-23.818,23.057-32.426
c8.87-10.398,23.658-23.112,40.648-19.129c14.01,3.285,24.33,19.391,31.584,30.21c3.548,5.288,7.105,11.241,10.578,17.655
l12.133,25.446c22.227,53.15,32.844,122.106-8.789,151.369c-3.873,2.722-8.496,4.636-12.935,6.029l-3.878,7.245
c25.657,15.113,52.242-6.228,60.439-31.938c14.138-44.338-1.676-101.902-24.266-145.678
C246.227,74.311,238.632,60.523,231.959,50.614z" />
<path mask="url(#arrow1-mask3)" fill="#42A8FC" d="M406.734,68.147c-17.148-17.841-37.951-33.412-59.953-44.124c-50.594-24.632-88.095-5.991-114.822,26.591
l-8.438,11.223c-3.395,4.914-6.599,10.027-9.592,15.281c-17.29,30.335-29.316,64.641-31.375,100.486
c-1.105,19.22-1.053,44.238,13.145,61.586c4.664,5.7,9.492,9.873,14.354,12.736l3.878-7.245c-3.323-4.796-5.046-11.189-6.378-16.149
c-5.317-19.783-3.871-40.435-0.658-59.469c4.553-26.978,14.076-56.253,28.76-81.78l9.521-14.934
c8.408-11.894,18.098-22.568,29.177-31.183c41.766-32.474,90.141-8.049,122.342,30.429
C404.036,81.622,413.766,75.922,406.734,68.147z" />
<path mask="url(#arrow1-mask4)" fill="#42A8FC" d="M404.413,71.956c0,0-3.166,0-12.344-3.026c-17.545-5.735-35.092-11.471-52.635-17.206
c-15.207-4.971-15.507,16.587-1.976,21.011c27.503,8.99,55.004,17.981,82.506,26.972c9.534,3.115,13.706-5.336,11.287-12.662
c-8.52-25.797-17.039-51.594-25.558-77.392c-4.546-13.767-25.338-10.047-20.597,4.315c5.671,17.17,11.341,34.342,17.013,51.514
L404.413,71.956z" />
</svg>
<!--END ARROW 1-->
</div>
I tried this and it works but it seems only supported in Firefox, no other browser???
<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>
https://jsfiddle.net/u1sqa210/
I want to make a spinner that will draw in clockwise, rotate 2 full cycles at a faster rate than the draw in, then draw out counter clockwise. I have it pretty close, but I am not sure how to coordinate the rotation with the drawing animations. I usually end up with it rotation not enough, or during the draw out animation, which is not what I want.
$spinnerSize: 100;
svg.spinner {
width: $spinnerSize + px;
height: $spinnerSize + px;
x: 100px;
y: 100px;
viewBox: 0 0 $spinnerSize $spinnerSize;
circle {
fill: transparent;
stroke-width: 12;
stroke-dasharray: (3.14 * $spinnerSize);
transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
animation:
spinner 3s linear infinite,
rotation 3s linear infinite;
transform: ScaleX(-1) rotate(270deg);
}
}
#keyframes spinner {
0% { stroke-dashoffset: 350; }
10% { stroke-dashoffset: 630; }
30% { stroke-dashoffset: 630; }
100% { stroke-dashoffset: 1000; }
}
#keyframes rotation
{
0% {transform: rotate(270deg)}
10% {transform: rotate(270deg)}
15% {transform: rotate(300deg)}
30% {transform: rotate(270deg)}
100% {transform: rotate(360deg);}
}
<svg class="spinner" stroke="url(#linear)">
<circle cx="50" cy="50" r="40"></circle>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(231,60,99,1)"/>
<stop offset="100%" stop-color="rgba(150,77,135,1)"/>
</linearGradient>
</defs>
</svg>
I think this is what you're technically asking for. I combined two animations into one:
#keyframes spinner {
0% { stroke-dashoffset: 350; transform: rotate(270deg) }
25% { stroke-dashoffset: 630; transform: rotate(270deg)}
50% { stroke-dashoffset: 630; transform: rotate(990deg)}
75% { stroke-dashoffset: 630; transform: rotate(990deg)}
100% { stroke-dashoffset: 1000; transform: rotate(990deg)}
}
https://jsfiddle.net/ocs3dkrm/
I have adapted code from this page: Filling water animation to suit my needs as you can see below.
CSS
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.rotate {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
#-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(150px,0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
HTML
<div id="banner">
<div class="fill">
<svg class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
Also...
Please see a screenshot of the output here.
However, I'd like to go one step further and control the level the 'water' is filled via a javascript function.
Usually, I would just control the X and Y position of the DIV that contains the waving SVG but that doesn't appear to work here.
I'd like to use this as a loading infographic but at the moment I can only control the 'water' level using...
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
I can use values of 0px (0%) to -155px (100%) but ideally I'd like to be able to set a percentage, perhaps by passing a variable in??
NOTE: I've rotated the original SVG because I was struggling to create a new one that worked correctly.
Any help would be much appreciated, I know I'm going to kick myself when I see the solution!! Thankyou.
Get rid of the .rotate and #banner .fill transforms
If you give the svg an id, you can adjust the top margin of the svg using a %
eg
el.style.marginTop = "75%";
Working example: (tested in chrome)
<style type="text/css">
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#water {
margin-top: 99%;
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
}
#keyframes waveAction {
0% {
-webkit-transform: translate(-150px,0);
transform: translate(-150px,0);
}
100% {
-webkit-transform: translate(150, 0);
transform: translate(150, 0);
}
}
</style>
<script>
function fill(percent) {
var el=document.getElementById("water");
if (el == null) {
alert("missing element");
return;
}
el.style.marginTop = (100-percent)+"%";
}
</script>
<div id="banner">
<div class="fill">
<svg id="water" class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
<script>
fill(25); //set fill to 25%
</script>
If that doesn't work you could try simply inserting an empty div before the svg and adjusting the height of that.