Lottie-web: On Mouse Over and Out Play

[ghosper]

Hi there! I'm trying to play my animation on "mouseover" event and reverse back to frame 0 on "onmouseout" event. Here's my code.

var myAnim = bodymovin.loadAnimation({
wrapper: menuButton, // the dom element that will contain the animation
animationData: animData,
animType: 'svg',
loop: false,
prerender: false,
autoplay: false,
rendererSettings: {
progressiveLoad: false,
//path: the relative path to the animation object. (animationData and path are mutually exclusive. because our bodymovin data is already here, we do not need to include)
}
});

menuButton.onmouseover = function(e) { // sets up the on-click function
myAnim.playSegments([myAnim.currentFrame, 20], true)
}

menuButton.onmouseout = function(e) { // sets up the on-click function
myAnim.playSegments([myAnim.currentFrame, 0], true)
}

But it looks like the animation start playing every time I'm moving the mouse inside the DOM.
What I'm doing wrong?

[sebvct14]

Hi !

I had the exact same issue so here is the answer I found :

1. You need to create a global variable to save your current frame using onEnterFrame method.
2. Once the mouse enter the div you have to remove the eventlistener for the mouseenter and create one for the mouseleave. On the mouseleave event do the opposite.

var curFrame;
container.addEventListener('mouseenter', fLaunch);

function fLaunch() {
    container.removeEventListener('mouseenter', fLaunch);
    anim.playSegments([curFrame,20], true);
    logoAnim.addEventListener('mouseleave', fReverse);
    anim.onEnterFrame = fSaveFrame;
}

function fReverse() {
    container.removeEventListener('mouseleave', fReverse);
    anim.playSegments([curFrame,0], false);
    container.addEventListener('mouseenter', fLaunch);
    anim.onEnterFrame = fSaveFrame;
}

function fSaveFrame() {
    curFrame = anim.currentFrame;
}

Hope this will help :)
Seb

[ghosper]

Will try that @sebvct14

[bodymovin]

@ghosper if I understand correctly, the problem is because mouseover on html triggers when navigating nested children of your main element.
you can do a couple of things to solve it, depending on your specific case:

• add a transparent layer on top to use as hit area.
• play around with the css property pointer-events (but I think it doesn't work on old browsers)
• keep a hover state and verify via js if the hovered element is a child from the main element and ignore the following events

[Eklor]

I'm trying to do something similar.
I exported a single animation that includes both the mouseenter animation and the mouseleave animation, which are different.
I'm trying to set up that their would be no jump/cut, if user leaves before Enter animation is finished , or (re)Enter before Leave animation is finished. Instead it would either play the bits backwards or towards "middle" (which is one frame, the hover state, paused, between the 2 animations).

I managed a bit but somehow since "currentFrame" is applying on segments and not over the whole animation, it doesn't work.

Help is greatly appreciated!

Codepen is here:
https://codepen.io/Eklor/project/editor/AVjWBM?fbclid=IwAR0oi0ePWqJIlSBduW3Yr0HVgVxcsFM1aKl0rjqxvYhTpdO0wi2wxzscSXA#

PS: I start coding in JS with this project so be gentle :). I haven't coded since AS2...