We Keep Coding

React Native Wave Animation: Convert CSS style to JS style

I am trying to achieve something like this for my React Native project.
I have tried using css-to-react-native-transform library to convert CSS to JS but it's been unsuccessful so far.
So any help regarding this issue would be greatly appreciated as I am fairly new with this.
Here is the CSS code:
<style>
.waves {
position: absolute;
bottom: 4.5vh;
width: 100%;
height:15vh;
margin-bottom:-7px; Fix for safari gap
min-height:130px;
max-height:180px;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
#keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/Shrinking for mobile/
#media (max-width: 768px) {
.waves {
height:70px;
min-height:70px;
}
}
</style>
<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="#89c2ee" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="#0379ff" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->
Here is what I have tried so far on my React Native:
import React from 'react';
import { View, Image, StyleSheet, ImageBackground, Text } from 'react-native';
import { useTheme } from 'react-native-paper';
import { SCREEN_INFO } from './constants';
import transform from "css-to-react-native-transform";
const color = transform(`
.waves {
position: absolute;
bottom: 4.5vh;
width: 100%;
height:15vh;
margin-bottom:-7px;
min-height:130px;
max-height:180px;
}
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
#keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
#media (max-width: 768px) {
.waves {
height:70px;
min-height:70px;
}
}
`);
export default function Welcome({ navigation, route }) {
const { colors } = useTheme();
return (
<View
style={styles.flex}
>
<View style={{borderWidth: 2, borderColor: 'red'}}>
<View style={[styles.waves]}/>
<View style={styles.parallax}/>
<Text style={{fontSize: 20, color:'black'}}>Hello</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
center: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
}
});

Onclick button to pause and run CSS animation with nested nth-child

I have a working css animation. I meant it to loop through each child changing the background color with keyframes.
I'm attempting to create a button to pause and run the animation on click. What I have so far works only for the parent. I can only run and pause the parent. I can't make it work for the nested nth-child.
I've tried document.querySelector('.animation1 animation1:nth-child(16n +1) animation1:nth-child(16n + 2))', document.querySelectorAll() but to no avail.
I've also attempted document.getElementsByClassName('animation1').classList.add("animation-run");.
var button = document.getElementById('button-ani');
var test_ani = document.getElementsByClassName('animation1');
button.onclick = function() {
test_ani[0].classList.toggle('playani');
}
/*document.getElementsByClassName('animation1').classList.add("animation-run"); */
.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}
/* animation-run
.animation-run {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}
*/
/* Without Paused
.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}
*/
.playani {
animation-play-state: running;
}
.animation1:hover {
animation: none;
fill: #666;
}
.animation1:nth-child(16n + 1) {
--animation-delay: 0.2s;
}
.animation1:nth-child(16n + 2) {
--animation-delay: 0.3s;
}
.animation1:nth-child(16n + 3) {
--animation-delay: 0.4s;
}
.animation1:nth-child(16n + 4) {
--animation-delay: 0.5s;
}
.animation1:nth-child(16n + 5) {
--animation-delay: 0.5s;
}
#keyframes ani_keyframes {
0% {
fill: #000;
}
40% {
fill: #FF0;
}
80% {
fill: #330;
}
}
<div id="animation1_wrapper">
<button id="button-ani">Toggle Animation Play State</button>
<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
<path class="animation1" d="M301.26 37.8001V18.8701C300.92 18.7801 300.58 18.6801 300.24 18.6001C287.1 15.3201 275.8 18.2901 266.73 23.3901V37.8001H301.26Z" fill="#f1f1f1"></path>
<path class="animation1" d="M329.15 37.8001C324.38 30.2101 316.5 23.6801 304.54 19.8201V37.8001H329.15Z" fill="#f1f1f1"></path>
----
----
</g>
</svg>
</div>

You can simply use a forEach loop and querySelectorAll method to do animation on all the classes when you click play OR when you click it again the animation will stop on all svg elements
querySelectorAll method return a node list of same class found in the DOM tree and using forEach we can iterate through it all and apply toggle class on found element with that class name
Live Working Demo:
var button = document.getElementById('button-ani');
var test_ani = document.querySelectorAll('.animation1');
button.onclick = function() {
test_ani.forEach(function(ani) {
ani.classList.toggle('playani');
})
}
.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}
/* animation-run
.animation-run {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}
*/
/* Without Paused
.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}
*/
.playani {
animation-play-state: running;
}
.animation1:hover {
animation: none;
fill: #666;
}
.animation1:nth-child(16n + 1) {
--animation-delay: 0.2s;
}
.animation1:nth-child(16n + 2) {
--animation-delay: 0.3s;
}
.animation1:nth-child(16n + 3) {
--animation-delay: 0.4s;
}
.animation1:nth-child(16n + 4) {
--animation-delay: 0.5s;
}
.animation1:nth-child(16n + 5) {
--animation-delay: 0.5s;
}
#keyframes ani_keyframes {
0% {
fill: #000;
}
40% {
fill: #FF0;
}
80% {
fill: #330;
}
}
<div id="animation1_wrapper">
<button id="button-ani">Toggle Animation Play State</button>
<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
<path class="animation1" d="M301.26 37.8001V18.8701C300.92 18.7801 300.58 18.6801 300.24 18.6001C287.1 15.3201 275.8 18.2901 266.73 23.3901V37.8001H301.26Z" fill="#f1f1f1"></path>
<path class="animation1" d="M329.15 37.8001C324.38 30.2101 316.5 23.6801 304.54 19.8201V37.8001H329.15Z" fill="#f1f1f1"></path>
----
----
</g>
</svg>
</div>

Javascript Animate Matching CSS Animation

I'm trying to get the Javascript animation to match exactly my css animation. I'm not sure why this is not working? I'm trying to use basic javascript. not jquery. The second div should be matching the animation of the first div
https://jsfiddle.net/JokerMartini/pf2nt4su/
let content = document.getElementById("content");
html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
backgroundColor: 'green',
opacity: 0
}, {
backgroundColor: 'blue',
opacity: 1
}];
// timing
let timing = {
duration: 2000,
iterations: Infinity
}
div.animate([
keyframes,
timing
]);
//elements += html;
content.append(div)
body {
background: #808080;
}
.base {
width: 180px;
height: 90px;
background: black;
}
.sample {
animation: play 2s steps(10) infinite;
}
#keyframes play {
0% {
background-color: green;
opacity: 0;
}
100% {
background-color: blue;
opacity: 1;
}
}
<div class='base sample'></div>
<div id="content"></div>

edit: Replace below (notice square brackets)
div.animate([
keyframes,
timing
]);
with:
document.getElementById("content").animate(
keyframes,
timing
);
Here working code snippet: (updated with steps in JS)
<style>
body {
background: #808080;
}
.base {
width: 180px;
height: 90px;
background: black;
}
.sample {
animation: play 2s steps(8) infinite;
}
#keyframes play {
0% {
background-color: green;
opacity: 0;
}
100% {
background-color: blue;
opacity: 1;
}
}
</style>
<div class='base sample'></div> <br>
<div id="content" class="base"></div>
<script>
let content = document.getElementById("content");
html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
backgroundColor: 'green',
opacity: 0
}, {
backgroundColor: 'blue',
opacity: 1
}];
// timing
var timing = {
duration: 2000,
easing: 'steps(8)',
iterations: Infinity
}
document.getElementById("content").animate(
keyframes,
timing
);
</script>

Move the content.append(div) before the animate call. Also, remove the [] from the animate.
I forked your JSFiddle. Here is a working version. https://jsfiddle.net/jrgiant/c5z7x2bu/.
let content = document.getElementById("content");
html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
backgroundColor: 'green',
opacity: 0
}, {
backgroundColor: 'blue',
opacity: 1
}];
// timing
let timing = {
duration: 2000,
iterations: Infinity
}
content.append(div)
div.animate(
keyframes,
timing
);
//elements += html;
body {
background: #808080;
}
.base {
width: 180px;
height: 90px;
background: black;
}
.sample {
animation: play 2s steps(10) infinite;
}
#keyframes play {
0% {
background-color: green;
opacity: 0;
}
100% {
background-color: blue;
opacity: 1;
}
}
<div class='base sample'></div>
<div id="content"></div>

Your exact problem is that you are applying the animation before appending the div, and passing the keyframes argument as a list of lists instead of a list of objects (as you defined it):
let content = document.getElementById("content");
html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
content.append(div)
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
backgroundColor: 'green',
opacity: 0
}, {
backgroundColor: 'blue',
opacity: 1
}];
// timing
let timing = {
duration: 200,
iterations: Infinity
}
div.animate(
keyframes,
timing
);

Circular countdown JavaScript from 10 to Zero

I have been trying to reverse the countdown in this demo from 10 down to zero Without luck.
I have tried reversing the countdown by doing this:
(1*(initialOffset/time))-initialOffset )
It did reverse the animated circle but not the countdown.
Any ideas?
Thanks
var time = 10;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
Here is also a codepen copy:
https://codepen.io/kaolay/pen/LRVxKd

Try $('h2').text(time - i); instead of $('h2').text(i);
I also added $('h2').text(time); as the 4th line to draw 10 at the beginning
Also, the first part of the circle is not animated in your code, so I changed this line:
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
To this block:
$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})
var time = 10;
var initialOffset = '440';
var i = 1;
$('h2').text(time); // adding 10 at the beginning if needed
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})
var interval = setInterval(function() {
$('h2').text(time - i); // here is the clue
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>

If you update this line $('h2').text(time - i); then you'll get the numeric countdown. I also initalize i = 0 so that the starting number is 10:
var time = 10;
var initialOffset = '440';
var i = 0
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(time - i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>

What exactly are you asking here?
"It did reverse the animated circle but not the countdown."
you are just trying to countdown?
why not set i = 10 and then do i--

If you want to invert the animation just invert all states of initial values and change i to (time-i). So it goes like this:
<div class="item">
<h2>10</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 0;
transition: all 1s linear;
}
var time = 10;
var initialOffset = 440;
var i = 0
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', 0);
var interval = setInterval(function() {
$('h2').text(time-i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset*i/time);
i++;
}, 1000);
Code pen:
https://codepen.io/anon/pen/Xybpge

Repeat a function infinite times

How can I repeat the animate function below infinite times? What is the best way to do it?
function animate(count) {
if (count == 0) {
$('.path').css({
'animation': 'draw2 4s'
});
}
if (count == 1) {
$('.path').css({
'animation': 'draw1 4s'
});
}
if (count == 2) {
$('.path').css({
'animation': 'draw3 4s'
});
}
if (count > 0) $('.path:first').one("animationend", function () {
animate(count - 1)
});
}

I think your function can be built in infinitely, Also use switch and cache of jQuery selection:
function animate(count) {
var path = $('.path');
while (true) {
switch (count) {
case 0 :
path.css({
'animation': 'draw2 4s'
});
break;
case 1:
path.css({
'animation': 'draw1 4s'
});
break;
case 2:
path.css({
'animation': 'draw3 4s'
});
break;
default:
path.first().one("animationend", function () {
animate(count - 1)
});
}
}
}

You can do it by using setInterval() function, you need to pass 2 parameters a function and time in Miliseconds to repeat that function,example:
var funcRepeat = animate("something");
var interval = setInterval(funcRepeat,1000);
//This will repeat your function once per second,
// with 500 as value will be twice per second, 250 > 4, etc
If you want to clear the interval, (thats why I stored it in a variable):
clearInterval(interval);
You could also make the funcion inside it:
var interval = setInterval(function(){
// code
},1000);
UPDATE
Looking at your comments, you could simply use recursivity with setTimeout() function:
$(document).ready(function () {
function animate() {
// launch the first animation
$('.path').css({'animation': 'draw2 4s' });
// wait 4s
setTimeout(function(){
// Launch the second animation
$('.path').css({'animation': 'draw1 4s'});
// wait another 4s
setTimeout(function(){
//launch the last one
$('.path').css({'animation': 'draw3 4s'});
// finnaly wait 4s for the last one to complete
// and start again the function using recursivity
setTimeout(animate(),4000);
},4000);
},4000);
}
animate();
});
background-color: #fff;
}
.crosshair {
cursor: crosshair;
}
.bg {
width: 40%;
margin-left: auto;
margin-right: auto;
}
.path {
animation-fill-mode: forwards;
animation-iteration-count: 3;
}
#keyframes draw1 {
0% {
stroke: green;
}
25% {
stroke: green;
}
50% {
stroke: green;
}
75% {
stroke: green;
}
100% {
stroke: green;
fill: none;
stroke-dashoffset: 100;
}
}
#keyframes draw2 {
0% {
stroke: red;
}
25% {
stroke: red;
}
50% {
stroke: red;
}
75% {
stroke: red;
}
100% {
stroke: red;
fill: none;
stroke-dashoffset: 100;
}
}
#keyframes draw3 {
0% {
stroke: blue;
}
25% {
stroke: blue;
}
50% {
stroke: blue;
}
75% {
stroke: blue;
}
100% {
stroke: blue;
fill: none;
stroke-dashoffset: 100;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg 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" width="612px" height="792px" viewbox="0 0 612 792" enable-background="new 0 0 612 792"
xml:space="preserve">
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M240,260c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V260z"/>
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M271,296c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V296z"/>
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M306,346c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V346z"/>
</svg>

I can do that with an else condition
$('.path:first').one("animationend", function () {
if (count > 0)
animate(count - 1)
else
animate(iterationcount - 1)
})
}