How to animate an SVG's paths fill-opacity property? - javascript

I have the following Gauge component:
The component is also rendering here: https://codesandbox.io/s/react-example-e3nxg
The component takes the prop rating as a number.
What I'd love to learn how to do is animate the path's opacity values. For example, if the prop for rating is passed a value of 5... How to make it so the component animates in each path, one at a time on a set time-delay between each path.
Any ideas on how this could be done?

Please checkout the sandbox url
Sandbox link
I made a little change in the css
#gauge {
fill: red;
}
.Animate-Draw {
fill-opacity: 0;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-name: FillIn;
animation-duration: 4s 0.5s;
/* animation-delay: .5s; */
}
.Animate-Draw:nth-child(1) {
animation-delay: 0.5s;
}
.Animate-Draw:nth-child(2) {
animation-delay: 1s;
}
.Animate-Draw:nth-child(3) {
animation-delay: 1.5s;
}
.Animate-Draw:nth-child(4) {
animation-delay: 2s;
}
.Animate-Draw:nth-child(5) {
animation-delay: 2.5s;
}
.Animate-Draw:nth-child(6) {
animation-delay: 3s;
}
.Animate-Draw:nth-child(7) {
animation-delay: 3.5s;
}
.Animate-Draw:nth-child(8) {
animation-delay: 4s;
}
#keyframes FillIn {
from {
fill-opacity: 0;
}
to {
fill-opacity: 1;
}
}
I hope this is what you are looking for.

Related

Can't add property "max-content" to #key-frames

i am trying to make a collapsible content, but the css won't accept the "max-content" property in animation. i get the error: "Invalid value: max-content" for the height of the content.
when i set the the height without #keyframes it works, but i want it to be animated
.full {
animation-name: fullText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.short{
animation-name: shortText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
#keyframes fullText {
from { height: 150; }
to { height: max-content; }
}
#keyframes shortText {
from { height: max-content; }
to { height: 150; }
}
Make sure your browser support max-content
https://caniuse.com/#search=max-content

How to fadeup words each with a little delay to make a great headline

I want to make a headline on my website which would animate like one on this website: https://www.thisisbeyond.com/what-we-believe/
So I want the words to fade-up each with a little delay.
How could I do that? If it is possible with css only, that would be great. But javascript is also acceptable :)
I have tried splitting my words each into one column and then animating the columns (opacity: 0 to 1 transition), but it results in strange spacing between words AND I want them to fade-up, not only change the opacity. So I think the right way to do it is by just putting each word in a different span element and then animating the spans.
<h1 class="animated2">
<span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span>
<span class="highlight">humanity </span>
<span class="highlight">in</span>
<span class="highlight">business.</span>
</h1>
LINK to the website I am trying to achieve this: michalkuczek.pl
.highlight{
background: #fff;
}
#keyframes fadeInUpSmall{
0%{
opacity:0;
transform:translateY(10px)}
100%{
opacity:1;
transform:translateY(0)}
}
.animated2 span:nth-child(1) {
animation-delay: .1s;
}
.animated2 span {
animation-name: fadeInUpSmall;
}
.animated2 {
animation-duration: 1s;
animation-fill-mode: both;
animation-fill-mode: both;
}
You can achieve the opacity animation by creating keyframes that define the start and end states.
CSS:
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
HTML:
<h1 class="animated2">
<span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span>
<span class="highlight fade-in one">humanity </span>
<span class="highlight fade-in two">in</span>
<span class="highlight fade-in three">business.</span>
</h1>

How to stop and reset an animation without destroying the original tag object?

I am trying to reset the animation of an object to it's initial point, so that I can restart it from the beginning.
function swap_animation(node, from, to) {
let t = node.style.animationDuration;
node.style.animationDuration = "0s";
node.style.animationPlayState = "initial";
setTimeout(function(){
node.style.animationDuration = t;
node.classList.remove(from);
node.classList.add(to);
}, 10);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>
The sample shows that if you click between Eat me! and Drink me!, Alice grows and shrinks in the course of 10 seconds. However, if you toggle between the two, you will note that the animation is continuing on from where it was before switching.
I think I read somewhere that one way to do this is to clone the object and replace the old one with a new one. That seems really overkill and I would think could cause performance problems, more so if the object is large, and would also be bad as it can cause memory fragmentation.
There must be some way to keep the object and modify it's properties to fix this, isn't there?
Ok, well I found a answer. It is to trigger a reflow. Got the answer from this site. Not exactly sure what the void is doing there though.
function swap_animation(node, from, to) {
node.classList.remove(from);
void node.offsetWidth;
node.classList.add(to);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>

SVG circuit breaker/switch close animation

I am trying to design a circuit breaker/switch which closes and opens on certain events. I have designed the breaker using SVG and using css animation and transform properties to animate the closing of it.
Using transform-origin: bottom but its not working as desired. Please help me following is my css code:
.closeme {
-webkit-animation-name: closeanimaton;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: -1.5s;
-webkit-animation-direction: alternate;
-webkit-transform-origin: bottom;
animation-name: closeanimaton;
animation-duration: 3s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-delay: -1.5s;
animation-direction: alternate;
animation-fill-mode: forwards;
transform-origin: bottom;
-moz-animation: none;
}
#-webkit-keyframes closeanimaton {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(35deg); }
}
#keyframes closeanimaton {
0% { transform: rotate(0deg); }
100% { transform: rotate(35deg); }
}
here is codepen link where i have the whole code, please feel free to edit:
https://codepen.io/anon/pen/OQexEP
This might not be what you have asked help for, but I find it alot easier to work with D3 to create the shapes and add animation to them. Check out my snippet below. It might give you an inspiration on how you may want to do the SVG animation.
var svg = d3.select('body').append("svg").attr("width",200).attr("height",150);
svg.style("background-color","black");
var part1 = svg.append("path").attr("d","M100,0 L100,30").attr("fill","none").attr("stroke","white");
var part2 = svg.append("path").attr("d","M100,80 L100,150").attr("fill","none").attr("stroke","white");
var moving_part = svg.append("g").attr("transform","translate(100,80) rotate(45)");
moving_part.append("path").attr("d","M0,0 L0,-50").attr("fill","none").attr("stroke","gold").attr("stroke-width",2);
moving_part.append("circle").attr("cy",-50).attr("r",5).attr("fill","gold");
moving_part.transition().delay(1000).duration(3000).attr("transform","translate(100,80) rotate(0)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Complex CSS Animation Repeating - use Javascript?

I have a CSS animation which is quite complex, ie. it's layered, or brings in two images, one a background image, then an <img> tag inside that, to overlay the original.
Demo is here: http://wdb.blazeoven.co.uk/
HTML:
<div class="container">
<a href="services.php">
<div class="col-sm-3 home-circle" id="one">
<img class="bottom" id="five" src="/assets/img/prop-consultants.png" alt="residential block in grounds">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="two">
<img class="bottom" id="six" src="/assets/img/chartered-surveyors.png" alt="old residential house doorways">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="three">
<img class="bottom" id="seven" src="/assets/img/managing-agents.png"
alt="row of shops">
</div>
</a>
<a href="services.php">
<div class="col-sm-3 home-circle" id="four">
<img class="bottom" id="eight" src="/assets/img/city-central.png" alt="City shop premises">
</div>
</a>
CSS:
#-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.home-banner .container a .col-sm-3 {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.home-banner #one {
background:url('/assets/img/propcons.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.home-banner #two {
background:url('/assets/img/charsurv.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.home-banner #three {
background:url('/assets/img/manage.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.home-banner #four {
background:url('/assets/img/citycen.svg') center no-repeat;
background-size: 100%;
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.grey-banner img.bottom {
opacity:1;
-webkit-animation:fadeOut ease-in 1;
-moz-animation:fadeOut ease-in 1;
animation:fadeOut ease-in 1;
// -webkit-animation-direction: alternate;
// -moz-animation-direction: alternate;
// animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.grey-banner img#five {
-webkit-animation-delay: 6.8s;
-moz-animation-delay: 6.8s;
animation-delay: 6.8s;
}
.grey-banner img#six {
-webkit-animation-delay: 7.4s;
-moz-animation-delay: 7.4s;
animation-delay: 7.4s;
}
.grey-banner img#seven {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
.grey-banner img#eight {
-webkit-animation-delay: 8.6s;
-moz-animation-delay: 8.6s;
animation-delay: 8.6s;
}
Trouble is, the client is requesting that it repeats again. That is, it plays in reverse, then starts again.
I have tried unsuccessfully to do this with CSS, is there a succinct way to do it with Javascript?
Thanks in advance for your comments.
Ben
You can repeat the animation using animation-iteration-count:
-moz-animation-iteration-count: 3; /* Firefox 5 -> 15 */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-iteration-count: 3; /* Firefox 16, IE 10 */
Not supported in IE 9 and earlier.
You can also use the value infinite to repeat over and over.
Edit:
As I commented you can try with cubic-bezier:
Use no delay, and animation-duration:10s. You can try with these cubic-bezier values on the animation-timing-function for the four images:
animation-timing-function: cubic-bezier(0.2, 0.0, 0.0, 1.5);
animation-timing-function: cubic-bezier(0.4,-0.7, 0.4, 1.8);
animation-timing-function: cubic-bezier(0.7,-1.7, 0.7, 1.8);
animation-timing-function: cubic-bezier(0.9,-1.6, 0.8, 0.8);
I have not tried this myself, and I am not sure how well it works with the values that are < 0 and > 1 (which is not standard).
If you want to play around with how the cubic-bezier is set up, you can use the tool at http://cubic-bezier.com to help finding useful values.
You said the your client just wanted the animation to play normally, then play in reverse and then repeat.
It so happens that there is a CSS property called animation-direction. This property states whether the animation plays normally or in reverse. Use animation-direction: alternate; to – as the property value indicates – alternate between playing normally and in reverse.
Read more here: MDN: animation-direction
Hope this helps :)

Categories

Resources