Develop Reference

CSS animation working on computer but not on my phone

so I have found this animation and I was trying it, it works perfectly on my computer but once I switch to my phone the animation is just frozen on one frame.
I don't see why it's doing this...
By the way, I am using React, I don't think it matters but we never know.
CSS :
.loader {
max-width: 15rem;
width: 100%;
height: auto;
stroke-linecap: round;
}
circle {
fill: none;
stroke-width: 3.5;
animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: 170px 170px;
will-change: transform;
}
circle:nth-of-type(1) {
stroke-dasharray: 550px;
}
circle:nth-of-type(2) {
stroke-dasharray: 500px;
}
circle:nth-of-type(3) {
stroke-dasharray: 450px;
}
circle:nth-of-type(4) {
stroke-dasharray: 300px;
}
circle:nth-of-type(1) {
animation-delay: -0.15s;
}
circle:nth-of-type(2) {
animation-delay: -0.3s;
}
circle:nth-of-type(3) {
animation-delay: -0.45s;
}
circle:nth-of-type(4) {
animation-delay: -0.6s;
}
#keyframes preloader {
50% {
transform: rotate(360deg);
}
}
HTML :
import React from 'react'
function Animation() {
return (
<div>
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#0000FF"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#0000FF"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>
</div>
)
}
export default Animation
Edit : So after trying on my brother's phone, it works, I don't know why it's doing that on my phone but working on others...

I think this happens because you use class instead of className. In React.JS we use className and the only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of the class attribute.
import React from 'react';
function Animation() {
return (
<div>
<svg className="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#0000FF"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#0000FF"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>
</div>
)
}
export default Animation

CSS Animation on SVG Element on iOS Safari 11 Not Working

I have a simple SVG that animates when it comes into viewport (via added class in Javascript). It's a simple bar chart that is supposed to animate the height of 2 rect elements.
It works fine everywhere except iPad Safari 11.1.2 (and maybe below)
When I remove the animation the SVG displays fine. The class is being added via javascript and webkit vendor prefixes are added for browser support.
<style type="text/css">
#keyframes draw {
from {
height: 0;
}
to {
height: 110px;
}
}
#keyframes drawBig {
from {
height: 0;
}
to {
height: 360px;
}
}
#-webkit-keyframes draw {
from {
height: 0;
}
to {
height: 110px;
}
}
#-webkit-keyframes drawBig {
from {
height: 0;
}
to {
height: 360px;
}
}
.animate-bar {
animation: draw 1s linear forwards;
animation-play-state: paused;
-webkit-animation: draw 1s linear forwards;
-webkit-animation-play-state: paused;
}
.animate-bar.bar-large {
animation-name: drawBig;
-webkit-animation-name: drawBig;
}
.play .animate-bar {
animation-play-state: running;
-webkit-animation-play-state: running;
}
</style>
<svg id="diagram" viewBox="0 0 290 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="svg" stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd">
<g id="left">
<rect class="animate-bar" x="0" y="283" width="132" height="107" rx="3" transform="scale(1,-1) translate(0,-676)">
</rect>
<text font-weight="bold">
<tspan x="47.384" y="263">1129</tspan>
</text>
</g>
<g id="right" transform="translate(152,0)">
<rect class="animate-bar bar-large" fill="#EEE6E2" x="0" y="33" width="132" height="360" rx="3" transform="scale(1,-1) translate(0,-426)">
</rect>
<text font-weight="bold">
<tspan x="36.56" y="17">4000</tspan>
</text>
</g>
</g>
</svg>
The CSS is just manipulating the height of the bars in the animation (which is paused until the class is added).
On iOS 11 though the bars just never animate so both heights appear to be 0 and you can't see either.
When I look in dev tools I can see the <rect> elements flashing in the DOM indicating something is happening to them (even though the only thing that should manipulate them is the CSS animation) but they are flashing very fast so I can't see what.
I'm at a loss of what else to try.
Here is a fiddle of the code:
http://jsfiddle.net/peuzdL2n/7/
Works in everything except iOS Safari 11 and below as far as I can see

How to increase and decrease opacity after few seconds using javascript?

I have this SVG element in HTML:
<g id="Group-8" transform="translate(108.800000, 0.293172)" fill="#FF056A" opacity="0.1">
Here you can see an attribute called opacity and it's value is 0.1
Now I want to increase it's value to 0.3, 0.6, 0.9 and then again to 0.6, 0.3, 0.1. It should do this all the time.
I have used Javascript setTimeout method but don't know how to make it do what I want :(
setTimeout(function() {
$("#Group-8-Copy-2").attr('opacity', '0.3');
}, 1000);

Checkout below snippet:
$( document ).ready(function() {
setInterval(function(){
opacity = $('#tilak').css("opacity");
opacity = Number(opacity) + 0.3;
if (opacity > 1) {
opacity = 0;
}
$('#tilak').css("opacity", opacity);
console.log(opacity);
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="tilak" style="opacity: 0">
kdjkd
</body>

Here you go
var value = [0.1, 0.3, 0.6, 0.9];
var add = true;
var i = 0;
setInterval(function() {
$("#Group-8-Copy-2").attr('opacity', [value[i]]);
i = add ? i + 1 : i -1;
add = i == value.length -1 ? false : (i == 0 ? true : add );
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" fill="#FF056A" opacity="0.1">
<circle cx="10" cy="10" r="5" />
</g>
</svg>

You can also achieve a pulsing without JS, using CSS animations. Using CSS animations often has advantages over animating with JS, you can more precisely adjust the timing of things by changing the animation-duration and tweaking other things instead of adjusting the length of the timeout on a timer, etc. It also tends to perform better because it is the browser doing all the work rather than your code being interpreted by he browser and interacting with the DOM to make it work.
.stepped-pulse {
animation-duration: 4s;
animation-name: stepped-pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(4, end);
}
#keyframes stepped-pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" class="stepped-pulse" fill="#FF056A">
<circle cx="10" cy="10" r="5" />
</g>
</svg>
If you want a smoother animation (as you seem to indicate in comments on another answer), you can just change the animation-timing-function (in this case I am removing it ant it will default to ease):
.pulse {
animation-duration: 4s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: .01;
}
100% {
opacity: .09;
}
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="Group-8-Copy-2" class="pulse" fill="#FF056A">
<circle cx="10" cy="10" r="5" />
</g>
</svg>

How can achieve an invisible pencil effect with SVG text? [duplicate]

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/

How to use CSS transitions with <text> elements?

I'm making a graph using svg, and want to make things looks pretty.
In my graph, I have a <circle> with <text> inside it, and the circle move around.
I used transitions to make my circle move pretty, but can't use it with <text> tags The text goes out of the circle, while the circle is moving.
What I can do so the text follow the circle element?
Plunker: https://plnkr.co/edit/iQZL1Pb4ozY80uFsVJaQ
var x = true;
var test = function() {
var circleEl = document.getElementById('circle');
var textEl = document.getElementById('text');
if (x) {
circleEl.setAttribute('cx', '400')
textEl.setAttribute('x', '397')
x = false
} else {
circleEl.setAttribute('cx', '50')
textEl.setAttribute('x', '47')
x = true
}
}
.circle-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
.text-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
<text class="text-transition" id="text" y="55" x="47">1</text>
</svg>
<button onclick="test()">test it!</button>

You need to be a bit cautious about using SVG presentation attributes and animating them with CSS. For example, your problem description only applies to Chrome. In Firefox, both the circle and the text jump.
Best to use only CSS style properties, in this case transform. In addition, you can group elements together so that only one animation is needed:
var x = true;
var test = function() {
var groupEl = document.getElementById('group');
if (x) {
groupEl.setAttribute('style', 'transform:translate(350px)')
x = false
} else {
groupEl.setAttribute('style', 'transform:translate(0px)')
x = true
}
}
.group-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<g id="group" class="group-transition" style="transform:translate(0px)">
<circle id="circle" r="10px" cy="50" cx="50" fill="red"></circle>
<text id="text" y="55" x="47">1</text>
</g>
</svg>
<button onclick="test()">test it!</button>

Turns out that IE11 and Edge do not support CSS transforms on SVG elements.
My workaround was to use both CSS Transform and Transform attribute, that way all browsers shows the circle and text right position (IE wasn't positioning it at all), but only the animations doesn't work in IE/Edge.
var x = true;
var test = function() {
var circleEl = document.getElementById('circle');
var textEl = document.getElementById('text');
if (x) {
circleEl.setAttribute('style', 'transform:translate(350px, 0px)')
textEl.setAttribute('style', 'transform:translate(350px, 0px)')
circleEl.setAttribute('transform', 'translate(350, 0)')
textEl.setAttribute('transform', 'translate(350, 0)')
x = false
} else {
circleEl.setAttribute('style', 'transform:translate(0px, 0px)')
textEl.setAttribute('style', 'transform:translate(0px, 0px)')
circleEl.setAttribute('transform', 'translate(0, 0)')
textEl.setAttribute('transform', 'translate(0, 0)')
x = true
}
}
.circle-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
.text-transition {
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
<svg width="1000px" heigth="200px">
<circle class="circle-transition" id="circle" r="10px" cy="50" cx="50" fill="red" style="transform: translate(0,0)" transform="translate(0, 0)"></circle>
<text class="text-transition" id="text" y="55" x="47" style="transform:translate(0,0)" transform="translate(0, 0)">1</text>
</svg>
<button onclick="test()">test it!</button>