We Keep Coding

animation bug on quick mouseover mouseout

Is there any way to fix an animation bug when I quickly mouseover/mouseout an element?
This is the live version of the website - https://daphne-rebuild.netlify.app/
When I quickly hover on and off the circle, it becomes buggy. Happens all the time so I'm really hoping there's some kind of fix.
<div class="hover-circle" #mouseover="hoverCircle" #mouseout="leaveCircle">
<div class="circle"></div>
<span>Enter</span>
</div>
hoverCircle(e) {
gsap.to(".hover-circle .circle", {
duration: 1,
scale: 1.3,
ease: "power4.out"
});
gsap.to(`.home-${this.currentComponent}`, {
delay: 0.1,
duration: 1,
scale: 1.05,
ease: "power4.out"
});
},
leaveCircle() {
gsap.to(".hover-circle .circle", {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
gsap.to(`.home-${this.currentComponent}`, {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
},

The problem is you placed a delay on hoverCircle. If hoverCircle and leaveCircle happen within less than 0.1s, the delayed animation from hoverCircle will actually get executed after the animation from leaveCircle. Removing the delay will probably fix the problem.
I can't be sure from the code you posted, but you might also want to stop any currently playing animations on your element (both when entering and leaving). To do that, use...
gsap.killTweensOf(target)
..., documented here.
In your example, it would probably look like:
hoverCircle() {
gsap.killTweensOf(".hover-circle .circle");
gsap.to(".hover-circle .circle", {
duration: 1,
scale: 1.3,
ease: "power4.out"
});
gsap.killTweensOf(`.home-${this.currentComponent}`);
gsap.to(`.home-${this.currentComponent}`, {
duration: 1,
scale: 1.05,
ease: "power4.out"
});
},
leaveCircle() {
gsap.killTweensOf(".hover-circle .circle");
gsap.to(".hover-circle .circle", {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
gsap.killTweensOf(`.home-${this.currentComponent}`);
gsap.to(`.home-${this.currentComponent}`, {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
}
If you have this in multiple places, you might want to refactor into a method called stopAnimations:
hoverCircle() {
this.stopAnimations();
gsap.to(".hover-circle .circle", {
duration: 1,
scale: 1.3,
ease: "power4.out"
});
gsap.to(`.home-${this.currentComponent}`, {
duration: 1,
scale: 1.05,
ease: "power4.out"
});
},
leaveCircle() {
this.stopAnimations();
gsap.to(".hover-circle .circle", {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
gsap.to(`.home-${this.currentComponent}`, {
duration: 0.5,
scale: 1,
ease: "power4.inOut"
});
},
stopAnimations() {
gsap.killTweensOf(".hover-circle .circle");
gsap.killTweensOf(`.home-${this.currentComponent}`);
}

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)

anime.js - how do I combine animations with different timings?

I would like to apply 2 different anime.js animations on an element.
But only the last one is applied.
https://plnkr.co/edit/p5fRlznLA98056SxDmIh?p=preview
$(document).ready(function() {
anime({
targets: ".box",
duration: 2000,
loop: true,
easing: 'easeInOutSine',
direction: 'alternate',
translateX: 250
});
anime({
targets: ".box",
duration: 1000,
loop: true,
easing: 'easeInOutSine',
direction: 'alternate',
scale: 0.5
});
});

You can merge both animations into one, but the alternate direction can't be applied to specific properties.
But you can use keyframes to achieve a similar effect :
anime({
targets: ".box",
translateX: 250,
scale: [
{value: .5},
{value: 1}
],
duration: 2000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});