We Keep Coding

Web Animations API add one anime to many elements

it is possible made code bellow using only Web Animations API? I don't like use included library, so I try use Web Animations API, but I can't find how Can I created one animations which include few elements.
var tl = anime.timeline({
easing: 'linear',
loop: true
});
tl
.add({
targets: '.button-scroll-icon',
height: ["100%", "0%"],
duration: 500
})
.add({
targets: '.button-scroll-icon',
opacity: [1, 0],
duration: 10
})
.add({
targets: '.button-scroll-icon',
height: ["0%", "100%"],
duration: 10
})
.add({
targets: '.button-scroll-wheel',
translateY: 15,
opacity: [1, 0],
duration: 500
}, '-=520')
.add({
targets: '.button-scroll',
translateY: 10,
duration: 500
}, '-=520')
.add({
targets: '.button-scroll-text',
opacity: [1, 0.5],
duration: 500
}, '-=520')
.add({
targets: '.button-scroll',
translateY: 0,
duration: 500
})
.add({
targets: '.button-scroll-icon',
opacity: [0, 1],
duration: 500
}, '-=500')
.add({
targets: '.button-scroll-text',
opacity: [0.5, 1],
duration: 500
}, '-=500');

How do I give an Anime.js element an opening animation first, and then a looping animation?

I'm trying to animate an object with Anime.js. It has an opening animation (rotate) that plays once, and after that it should have a different rotate animation which loops indefinitely. I put both thesse animations in a timeline, but it won't loop the second animation.
Javascript:
var tl = anime.timeline({
easing: 'easeOutExpo',
targets: '.fles',
});
tl
.add({
rotate: 20,
duration: 750,
loop: false,
})
.add({
duration: 6000,
loop: true,
easing: 'easeInOutQuad',
keyframes: [
{rotate: '+=1'},
{rotate: '-=1'},
{rotate: '+=1.5'},
{rotate: '-=2'},
{rotate: '+=1.5'},
],
})
Is this possible with Anime.js, and how?
Thanks in advance!

It is not possible to do it with timelines, timeline just loops when you pass loop: true on its creation. From source code it seems that loop property in added objects is ignored.
However you can use promise .finished on anime instance:
anime({/*first animation*/}).finished.then(()=>
anime({/*next animation*/}))
and to mimic inheriting properties:
let base = {
easing: 'easeOutExpo',
targets: '.fles',
}
anime(Object.assign({}, base, {
rotate: 20,
duration: 750,
loop: false,
}))
.finished.then(()=>
anime(Object.assign({}, base, {
duration: 6000,
loop: true,
easing: 'easeInOutQuad',
keyframes: [
{rotate: '+=1'},
{rotate: '-=1'},
{rotate: '+=1.5'},
{rotate: '-=2'},
{rotate: '+=1.5'},
],
})));

This may be solved by using an inner and an outer <div>. Place the looping animation on one of them, and the opening animation on the other.
<div id="outer">
<div id="inner">
Foo
</div>
</div>
// opening animation
anime({
targets: '#outer',
scale: [0, 1],
loop: false
});
// looping animation
anime({
targets: '#inner',
rotate: [-5, 5],
loop: true,
direction: 'alternate'
});

Moving Letters by tobias ahlin used on several Headings

I'm using this wonderful javascript animation tool by tobias ahlin https://tobiasahlin.com/moving-letters/#11 it is based upon anime.js. And I'd like to use this animation on several h2 tags. This is the code I need to use multiple times:
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml11 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml11 .line',
scaleY: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700
})
.add({
targets: '.ml11 .line',
translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
easing: "easeOutExpo",
duration: 700,
delay: 100
}).add({
targets: '.ml11 .letter',
opacity: [0,1],
easing: "easeOutExpo",
duration: 600,
offset: '-=775',
delay: (el, i) => 34 * (i+1)
}).add({
targets: '.ml11',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
Any suggestion? Thank you very much

Js animation does not work

Js animation letters does not work.
Console :index.php:29 Uncaught ReferenceError: $ is not defined at
index.php:29. Black letters without animation.
$('.ml11 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({loop: true})
.add({
targets: '.ml11 .line',
scaleY: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700
})
.add({
targets: '.ml11 .line',
translateX: [0,$(".ml11 .letters").width()],
easing: "easeOutExpo",
duration: 700,
delay: 100
}).add({
targets: '.ml11 .letter',
opacity: [0,1],
easing: "easeOutExpo",
duration: 600,
offset: '-=775',
delay: function(el, i) {
return 34 * (i+1)
}
}).add({
targets: '.ml11',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});

jQuery is the solution: https://www.w3schools.com/jquery/jquery_get_started.asp.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What is the best method of starting/ stoping js anime timeline on input

I'm attempting to create an animation (using anime.js) that plays an animation timeline once when the users starts typing and will loop for the duration that the user is typing in the input box. When the user stops typing the animation will complete its current loop and stop playing.
Here's my progress at the moment, you can observe the animation working incorrectly: https://codepen.io/andrewbentley/full/XqMrze
Here's what my anime.js code timeline:
var basicTimeline = anime.timeline({
loop: true,
autoplay: false,
duration: 700
});
basicTimeline
.add({
targets: '#circ1',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ1',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
delay: 100
});
document.querySelector('#email').onkeypress = basicTimeline.play;
document.querySelector('#email').onkeyup = basicTimeline.pause;
Is anyone able to advise me as to the best way of achieving the desired effect whilst using anime.js timeline utility and the use of event listeners such as onkeypress, onkeyup etc.

I think you need a timer which pauses your animation after some time of inactivity.
https://codepen.io/anon/pen/qYoPKQ
var timer = false;
document.querySelector('#email').onkeypress = function () {
if(basicTimeline.paused) basicTimeline.play();
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
basicTimeline.pause();
basicTimeline.reset();
}, 500);
};

The issue of stopping an animation at the end of the current loop has been raised here:
on github There are some good suggestions there.
Perhaps the best one is from Edrees Jalili
function pausableLoopAnime({loopComplete, ...options}) {
const instance = anime({
...options,
loop: true,
loopComplete: function(anim) {
if(instance.shouldPause) anim.pause();
if(typeof loopComplete === 'function') loopComplete(anim);
}
});
instance.pauseOnLoopComplete = () => instance.shouldPause = true;
return instance;
}
const animation= pausableLoopAnime({
targets: '.polymorph',
points: [
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
],
easing: 'easeOutQuad',
duration: 1200,
});
setTimeout(animation.pauseOnLoopComplete, 100)