Anime JS - Hover animation does not work

335
May 25, 2018, at 6:50 PM

I just started using the anime.js library and I got stuck when I wanted to achive a hover animation like this one: https://codepen.io/juliangarnier/pen/aWERWX .

In my example ,when you hover over the three small squares, the animated objects don't go back to their original position after the mouse is leaving the div-area. Just one square goes back an forth when hovering over it. I can't seem to find the difference between mine and his js code.

    var sqb = document.querySelector('.center-sqb');
function anisqb(){
anime.remove(sqb);
anime({
    targets: 'div.sqb2',
    translateY: -18.7,
    backgroundColor: [{value:'rgba(255, 255, 255, 0)', duration: 1,}],
    scale: 8,
    borderWidth: [{value:'1px', duration: 10,}],
    duration: 250,
    easing: [.27,.04,.67,1]
});
anime({
    targets: 'div.sqb1',
    translateY: [
        {value: -10, duration: 150,},
        {value: -32, duration: 150, delay: 250,}
    ],
    translateX: [{value: -8,}],
    backgroundColor: [{value:'rgba(255, 255, 255, 0)', duration: 1,}],
    duration: 250,
    easing: [0,.41,.52,.99]
});
anime({
    targets: 'div.sqb3',
    translateX: 3,
    backgroundColor: [{value:'rgba(255, 255, 255, 0)', duration: 1,}],
    duration: 250,
    easing: [0,.41,.52,.99]
});
}
function entersqb() { anisqb(1.2, 800, 400) };
function leavesqb() { anisqb(1.0, 600, 300) };
sqb.addEventListener('mouseenter', entersqb, false);
sqb.addEventListener('mouseleave', leavesqb, false);

So my question is, what makes the animation not reverse itself when the mouse leaves the area? I'm also familiar with this hover-example https://codepen.io/juliangarnier/pen/NjXONp, which works for me, but I have no idea how several objects can be animated simultaneously with a single hover.

Thank you alot in advance for your answers.

READ ALSO
How can I find how many units are in the canvas?

How can I find how many units are in the canvas?

I have the code listed belowThe code is on https://omegalords

80
Create branches like gitHub layout, using html/css/js [on hold]

Create branches like gitHub layout, using html/css/js [on hold]

Can you please tell me, how can I create a tree layout like GitHub trees/branches? Something like tree history in Sourcetree (right side of commits)Hope I wrote that clearly

91
How can I select this element in CSS? [duplicate]

How can I select this element in CSS? [duplicate]

This question already has an answer here:

111