CODEWITHSUNDEEP
javascriptanime.js
Ben
Ben

Reputation: 33

Rotating cirle anime js

I'm trying to let a cricle spin and on mouseenter I want the circle to stop spinning and rotate "x" degree, on mouseleave the circle should spin back to its origin and continue the spinning animation.

function rotatingCircle(degree) {
    var test = 
    anime({
    targets: [document.getElementsByTagName("svg")[0]],
    rotate: degree,
    duration: 800,
    loop: true,
    elasticity: 0,
    easing: "linear"

  });
};

rotatingCircle(360);

var buttonEl = document.querySelector('.trigger');
var circleOne = document.getElementsByTagName("svg");


buttonEl.addEventListener('mouseenter', rotatingCircle(20));

buttonEl.addEventListener('mouseleave', rotatingCircle(0));

Add the moment my svg is not rotating at all. When I remove the 'mouseenter' and 'mouseleave' event, then my svg is rotating as wanted. How do I keep a rotating loop animation AND can add a 'mouseenter' / 'mouseleave' event, which triggers the rotating SVG to rotate to a specifig angle?

Upvotes: 1

Views: 1852

Answers (1)

Joshua Wootonn
Joshua Wootonn

Reputation: 1276

One problem I see with your code is that

buttonEl.addEventListener('mouseenter', rotatingCircle(20));
buttonEl.addEventListener('mouseleave', rotatingCircle(0));

are actually calling the function rotatingCircle where as you want to send a function name or anonymous function here instead.

Function name example if these were parameterless functions

buttonEl.addEventListener('mouseenter', rotatingCircle);
buttonEl.addEventListener('mouseleave', rotatingCircle);

Anonymous function example when you need to send parameters (use this one)

buttonEl.addEventListener('mouseenter', () => rotatingCircle(20));
buttonEl.addEventListener('mouseleave', () => rotatingCircle(20));

How to think about it with an example:

listeners just need the reference to what to call when they are triggered, they don't need what the function returns from calling

I made a code sandbox of what I think you are talking about. Check it out here: https://codesandbox.io/s/aninejs-different-animations-for-different-hover-states-ld76r

Upvotes: 1

Related Questions