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 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>
What is the criteria?
In the following example, I am animating CSS transform, and when you click anywhere (while in Google Chrome) the animation is blocked by a 2-second-long while loop.
Why is the CSS transform animation blocked?
EDIT: Lately Chrome no longer blocks the transform while the main thread is blocked, indicating that they have moved the sort of animation in the following example off main thread.
Animating transform can happen on a separate thread, but it isn't clear exactly when. Sometimes it works.
In this first example, separate-thread transform animation does not happen (click on it to block the main thread and therefore pause the animation):
window.addEventListener('click', kill)
function kill() {
var start = +new Date;
while (+new Date - start < 2000){}
}
html, body, div {
width: 100%; height: 100%;
margin: 0; padding: 0;
/* background: #364659; */
/* background: #293442; */
background: #1E2630;
overflow: hidden;
}
#keyframes ShimmerEffect {
0% { transform: translate3d(-15%, -15%, 0) }
100% { transform: translate3d(-60%, -60%, 0) }
}
.shimmerSurface {
/* overflow: hidden; */
/* perspective: 100000px */
}
.shimmerSurfaceContent {
transform-style: preserve-3d;
background: linear-gradient(
-45deg,
rgba(0,0,0,0) 40%,
rgba(244,196,48,0.6) 50%,
rgba(0,0,0,0) 60%
);
background-repeat: repeat;
background-size: 100% 100%;
width: 400%; height: 400%;
animation: ShimmerEffect 1.8s cubic-bezier(0.75, 0.000, 0.25, 1.000) infinite;
}
<div class="shimmerSurface">
<div class="shimmerSurfaceContent"></div>
</div>
(codepen link)
EDIT: seems the example's animation is not blocked in Safari (though it chops the gradient), but is blocked only in Chrome and Firefox. How can we unblock the animation in Chrome and Firefox?
In next example, when you click anywhere to block the main thread (in Chrome), you will see that transform is animated on a separate thread because it continues to animate, while the stroke-offset animation is frozen because apparently stroke-offset animation is happening on the main thread:
window.addEventListener('click', kill)
function kill() {
var start = +new Date;
while (+new Date - start < 2000){}
}
.loader {
--path: #2F3545;
--dot: #5628EE;
--duration: 3s;
width: 44px;
height: 44px;
position: relative;
}
.loader:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
display: block;
background: var(--dot);
top: 37px;
left: 19px;
transform: translate(-18px, -18px);
-webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg {
display: block;
width: 100%;
height: 100%;
}
.loader svg rect,
.loader svg polygon,
.loader svg circle {
fill: none;
stroke: var(--path);
stroke-width: 10px;
stroke-linejoin: round;
stroke-linecap: round;
}
.loader svg polygon {
stroke-dasharray: 145 76 145 76;
stroke-dashoffset: 0;
-webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg rect {
stroke-dasharray: 192 64 192 64;
stroke-dashoffset: 0;
-webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg circle {
stroke-dasharray: 150 50 150 50;
stroke-dashoffset: 75;
-webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader.triangle {
width: 48px;
}
.loader.triangle:before {
left: 21px;
transform: translate(-10px, -18px);
-webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
#-webkit-keyframes pathTriangle {
33% {
stroke-dashoffset: 74;
}
66% {
stroke-dashoffset: 147;
}
100% {
stroke-dashoffset: 221;
}
}
#keyframes pathTriangle {
33% {
stroke-dashoffset: 74;
}
66% {
stroke-dashoffset: 147;
}
100% {
stroke-dashoffset: 221;
}
}
#-webkit-keyframes dotTriangle {
33% {
transform: translate(0, 0);
}
66% {
transform: translate(10px, -18px);
}
100% {
transform: translate(-10px, -18px);
}
}
#keyframes dotTriangle {
33% {
transform: translate(0, 0);
}
66% {
transform: translate(10px, -18px);
}
100% {
transform: translate(-10px, -18px);
}
}
#-webkit-keyframes pathRect {
25% {
stroke-dashoffset: 64;
}
50% {
stroke-dashoffset: 128;
}
75% {
stroke-dashoffset: 192;
}
100% {
stroke-dashoffset: 256;
}
}
#keyframes pathRect {
25% {
stroke-dashoffset: 64;
}
50% {
stroke-dashoffset: 128;
}
75% {
stroke-dashoffset: 192;
}
100% {
stroke-dashoffset: 256;
}
}
#-webkit-keyframes dotRect {
25% {
transform: translate(0, 0);
}
50% {
transform: translate(18px, -18px);
}
75% {
transform: translate(0, -36px);
}
100% {
transform: translate(-18px, -18px);
}
}
#keyframes dotRect {
25% {
transform: translate(0, 0);
}
50% {
transform: translate(18px, -18px);
}
75% {
transform: translate(0, -36px);
}
100% {
transform: translate(-18px, -18px);
}
}
#-webkit-keyframes pathCircle {
25% {
stroke-dashoffset: 125;
}
50% {
stroke-dashoffset: 175;
}
75% {
stroke-dashoffset: 225;
}
100% {
stroke-dashoffset: 275;
}
}
#keyframes pathCircle {
25% {
stroke-dashoffset: 125;
}
50% {
stroke-dashoffset: 175;
}
75% {
stroke-dashoffset: 225;
}
100% {
stroke-dashoffset: 275;
}
}
.loader {
display: inline-block;
margin: 0 16px;
}
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #F5F9FF;
display: flex;
justify-content: center;
align-items: center;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
<div class="loader">
<svg viewBox="0 0 80 80">
<circle id="test" cx="40" cy="40" r="32"></circle>
</svg>
</div>
<div class="loader triangle">
<svg viewBox="0 0 86 80">
<polygon points="43 8 79 72 7 72"></polygon>
</svg>
</div>
<div class="loader">
<svg viewBox="0 0 80 80">
<rect x="8" y="8" width="64" height="64"></rect>
</svg>
</div>
Why does the first example's transform animation run on the main thread, while the second example's transform animation runs on a separate thread?
What are the criteria under which a transform is guaranteed to run in a separate thread (at least, in Chrome)?
Browser Threads
Each browser has at least three threads; precisely what is run on each depends on the browser. Modern browsers all have more than three now, but they still have three categories of threads that will always be separate. Why?
One will always be entirely separate and only accessible by the browser to handle things like scrolling, opening a new tab etc... At least one will always be for things like calculating and parsing and so will be run on the CPU. And at least one thread will run on the GPU as it is required for something to be shown on your screen.
Layers
For the GPU to know what it's showing on the screen it needs the layout rasterised in a bitmap format. But as things move around the screen it's best if we send the GPU a few bitmaps that can move around. We call these layers.
as #irdkwmnsb has pointed out we can use the layers tab in the developer tools to see exactly which elements have been split into separate bitmaps.
Explicitly Creating A Layer
For any HTML or SVG element that we know will transform, we can add the following CSS rule to ensure the element is separated into a separate bitmap layer and the transition shouldn't be blocked by other activity on the main thread:
will-change: transform
so adding the CSS rule
.shimmerSurfaceContent {
will-change: transform;
}
should stop the transition from being blocked in your first example.
Why Only In Some Browsers?
The reason some browsers may not automatically split this element into a separate layer is that there is a performance issue with creating too many bitmap layers so they are careful not to create too many. Also, some things don't look good when created as separate bitmaps and moved around so the browser may avoid it.
But for this example specifically, we can see from the two bitmap layers in this image that the top one has a semi-transparent edge. Things like this have previously caused aliasing problems for the GPU as it calculates the various shaded of yellow.
This may have been a reason for chrome to previously avoid separating it into a new bitmap layer.
I have an SVG circle, it has a small svg circle inside it and a polygon inside the small circle, when i click on the polygon it should rotate and it's working fine, but after rotation a tool-tip should appear above the polygon and i don't know how to show it, i put it in a div above my svg, here is my code:
document.querySelector('polygon').addEventListener('click', function() {
this.classList.toggle('rotated');
});
.rotated {
transform: rotate(-90deg);
}
polygon {
transition: all 1s;
}
<div class="marker marker-index-0" style="display: none;">
<h3>I should be a tooltip</h3>
</div>
<svg>
<circle cx="40" cy="122.5" r="26" fill="red"></circle>
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g>
</svg>
Looks to me like you never specified to show the tool-tip ;)
document.querySelector('svg').addEventListener('click', function() {
document.querySelector('polygon').classList.toggle('rotated');
document.getElementById('marker').classList.toggle('show');
});
.rotated {
transform: rotate(-90deg);
}
polygon {
transition: all 1s;
}
.show {
display: block !important;
}
<div class="marker marker-index-0" id="marker" style="display: none;">
<h3>I should be a tooltip</h3>
</div>
<svg>
<circle cx="40" cy="122.5" r="26" fill="red"></circle>
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g>
</svg>
Hope this helps!
A transition alone won't do it, because you can't do anything after it's done.
Instead, it would be a good time for you to learn CSS Animations.
Note that I applied the classes to a container involving both the polygon and the tooltip, in order to avoid synchronization errors.
document.querySelector('polygon').addEventListener('click', function() {
if(!document.getElementById('animationContainer').classList.contains("animated")) {
document.getElementById('animationContainer').classList.add("animated");
document.getElementById('animationContainer').classList.add("rotated");
} else {
document.getElementById('animationContainer').classList.toggle('rotated');
document.getElementById('animationContainer').classList.toggle('faded');
}
});
#keyframes polygonAnimation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-90deg); }
100% { transform: rotate(-90deg); }
}
#keyframes polygonReverseAnimation {
0% { transform: rotate(-90deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
#keyframes markerAnimation {
0% { display: none; opacity: 0; }
50% { display: block; opacity: 0; }
100% { display: block; opacity: 1; }
}
#keyframes markerReverseAnimation {
0% { display: block; opacity: 1; }
50% { display: block; opacity: 0; }
100% { display: none; opacity: 0; }
}
#animationContainer .marker {
opacity: 0;
position: absolute;
z-index: 10;
}
.rotated polygon {
animation-name: polygonAnimation;
animation-duration: 2s;
animation-fill-mode: both;
}
.rotated .marker {
animation-name: markerAnimation;
animation-duration: 2s;
animation-fill-mode: both;
}
.faded polygon {
animation-name: polygonReverseAnimation;
animation-duration: 2s;
animation-fill-mode: both;
}
.faded .marker {
animation-name: markerReverseAnimation;
animation-duration: 2s;
animation-fill-mode: both;
}
<div id="animationContainer">
<div class="marker marker-index-0">
<h3>I should be a tooltip</h3>
</div>
<svg>
<circle cx="40" cy="122.5" r="26" fill="red"></circle>
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g>
</svg>
</div>
Just add the following to your event listener that rotates the svg. The rest is just css.
$('.marker-index-0').show();
Btw you have cursor pointer on the inner circle, but it only works on clicking the polygon. That's not intuitive design.
I am trying to animate a text that I created and saved as SVG. So far, I've only been able to animate the stroke, but that's not what I am trying to achieve. How can I implement animation like the two examples, below?
http://codepen.io/se7ensky/pen/waoMyx
https://codepen.io/munkholm/pen/EaZJQE
Here is what I have so far:
.test {
width: 300px
/* margin:0 auto; */
}
.l1 {
animation: dash 15s 1;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation-fill-mode: forwards;
/*fill: none;*/
}
.l2 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 20s linear forwards;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 1s;
}
.l3 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 2.5s;
/* Chrome, Safari, Opera */
animation-delay: 2.5s;
}
.l4 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 4.5s;
/* Chrome, Safari, Opera */
animation-delay: 4.5s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="test" 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 30.1 21.8" style="enable-background:new 0 0 30.1 21.8;" xml:space="preserve">
<g>
<path class="text l1" d="M16.5,9.2c-0.2-0.2-0.2-1,0.1-1.5c0.1-0.1,0.2-0.3,0.3-0.4c-1.6,0-3.2-0.3-4.7-0.1C10.8,7.3,9.5,8,9.3,8.9
c-0.1,0.6,0.5,0.8,0.7,1c0.1,0.1,0,0.2-0.1,0.1C9.5,10,8.7,9.4,9,8.7c0,0,0-0.1,0-0.2c0.3-1.2,1.7-1.8,3.3-1.9
c1.8-0.1,3.9,0.4,4.8,0.4c0.2-0.2,0.4-0.4,0.5-0.4c0.3-0.1,0.6,0.1,0.3,0.4c-0.1,0.1-0.4,0.3-0.6,0.5c-0.4,0.4-0.8,1-0.5,1.5
C16.8,9.2,16.7,9.3,16.5,9.2z M12.1,12.8c0.1,0.1-0.1,0.3-0.1,0.3c-0.2,0.3-0.5,0.8-0.8,0.8c-0.1,0-0.5-0.1-0.5-0.1
c-0.1-0.8,1.5-3.5,1.9-4.2c0.2-0.3,0.1-0.4,0.1-0.5c0.1-0.4,0.9-1.4,1.5-1.4c0.2,0,0.8,0.2,0.7,0.5c0,0-0.1-0.1-0.2-0.1
c-1.1,0-2.9,3.6-3.4,4.7c-0.3,0.7,0.1,0.6,0.4,0.3C11.8,13,12,12.8,12.1,12.8z" fill="red" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" />
<path class="text l2" d="M14.4,12.3c-0.2,0-0.3-0.2-0.1-0.2c0.4,0,1.1-0.4,1.5-0.8c0.2-0.2,0.6-0.5,0.5-0.8c0-0.3-0.4-0.2-0.6-0.1
c-0.7,0.3-1.7,1.3-2,2.2c-0.3,1,0.6,1,1.4,0.7c0.9-0.4,1.7-1,2.1-1.7c0-0.1,0.1-0.1,0.1,0c0.1,0,0.1,0.1,0,0.1
c-0.5,0.8-1.2,1.5-2.1,1.8c-1.2,0.5-2.8,0-2.1-1.5c0.4-0.8,2.2-2.4,3.1-2.1c0.5,0.2,0.4,0.8,0.2,1.1C16.1,11.8,15,12.2,14.4,12.3z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"
/>
<path class="text l3" d="M17.3,13.6c-0.2,0.2-0.1,0.5,0.4,0.4c0.6-0.2,1.5-0.9,1.5-1.6c0-0.3-0.7-0.6-0.9-0.7c-0.2-0.1-0.3-0.3-0.4-0.4
c-0.1,0.2-0.3,0.5-0.5,0.8c-0.1,0.1-0.3,0-0.2-0.1c0.3-0.5,0.6-0.9,0.6-1.1c0.1-0.9,1.7-1.7,2.6-1.7c0.5,0,1,0.3,0.7,0.8
c-0.1,0.2-0.2,0.3-0.4,0.4c-0.1,0-0.2,0-0.1-0.2c0.2-0.2,0.3-0.6,0-0.6c-0.4,0-1,0.2-1.3,0.4c-0.4,0.2-0.7,0.4-1,0.9
c-0.3,0.3-0.2,0.6,0.1,0.8c0.8,0.5,1.8,0.8,0.9,1.8c-0.4,0.5-1.1,0.7-1.7,0.9c-0.2,0-0.7,0.1-0.9-0.1c-0.1-0.1,0-0.3,0.2-0.5
c0.1-0.1,0.3-0.3,0.6-0.3c0.1,0,0.1,0.1,0,0.1C17.5,13.4,17.3,13.5,17.3,13.6z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
<path class="text l4" d="M23.6,10.2c-0.2,0.1-0.8,0.1-1.4,0.2c-0.2,0.3-0.3,0.5-0.3,0.6c-0.4,0.7-0.7,1.4-0.7,1.7c-0.1,0.5,0.2,0.8,0.6,0.6
c0.4-0.2,1.3-1,1.8-1.7c0.1-0.1,0.2,0,0.1,0.1c-0.2,0.4-1,1.2-1.6,1.6c-0.4,0.3-1.3,0.6-1.5-0.1c-0.1-0.3,0.1-0.9,0.4-1.5
c-0.1,0.1-0.2,0.3-0.5,0.6c-0.1,0.1-0.2,0-0.1-0.2c0.4-0.5,0.7-1,0.9-1.2c0,0,0.1-0.2,0.3-0.5c-0.1,0-0.2,0-0.3,0
c-0.1,0-0.2-0.1-0.2-0.3c0.1-0.2,0.4-0.2,0.6-0.2c0,0,0,0,0,0l0.6-1.1c0.3-0.5,0.3-0.6,0.5-0.7c0.2,0,0.4,0,0.5,0.1
c0.1,0.1,0,0.4-0.1,0.5C23.2,9,23.1,9,23,9.1l-0.6,1l0.2,0c0.4,0,0.7-0.1,1.1-0.1C23.9,10,24.1,10.1,23.6,10.2z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
View on CodePen
How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.
So the standard dash animation technique works as follows. You take a standard line:
<svg>
<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Then you add a dash pattern to it and animate it's position (stroke-dashoffset).
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.
So let's pretend this simple path below represents your logo:
<svg>
<path stroke="black" stroke-width="1" fill="lightgrey"
d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</svg>
We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<clipPath id="logo">
<path d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</clipPath>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>
So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.
Then animate that path using the dashoffset technique while clipping it with your original logo.
Update
Here's a final demo with a more realistic letter shape:
// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");
chk.addEventListener("input", function(evt) {
if (evt.target.checked) {
penpath.classList.add("clipped");
} else {
penpath.classList.remove("clipped");
}
});
.pen {
fill: none;
stroke: red;
stroke-width: 18;
stroke-linecap: round;
stroke-dasharray: 206 206;
stroke-dashoffset: 206;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.clipped {
clip-path: url(#logo);
}
#keyframes draw {
from {
stroke-dashoffset: 206;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<defs>
<clipPath id="logo">
<path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
</clipPath>
</defs>
<path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen clipped"/>
</svg>
<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>
The example looks like a combination of svg paths and delayed animations.
This blog post by CSS-Tricks explains it pretty well (Note that the svg must have strokes for this to work):
https://css-tricks.com/svg-line-animation-works/
Here's a guide on stroke-dashoffset (used on the example) that might be useful:
https://css-tricks.com/almanac/properties/s/stroke-dashoffset/