Streaming live at 10am (PST)

Svg Logo Animation

#1

Hello,
I have got a svg logo animation with js. and .json file.
I want to make the hover on the logo, open the menu and start the animation. Accordingly - hover out to start again and hide the menu.

How do I add this to the project? I’m asking for help.

I made div - “lottie” in webflow.
Add js and json file, like external links in head.
This is my js code.

#2

Hello @sparkly,

You might want to add some javascript code to your custom code embed component. Unfortunately I can’t see your javascript code (?)

To trigger an action on mouseover and mouseout, you would write something like this:

const logo = document.getElementById(“logo”);
const menu = document.getElementById(“menu”);

logo.addEventListener (“mouseover”, function () {
// you could use the .toggle() method to apply a css class “show” 🤪
menu.classList.toggle(“show”);
});

logo.addEventListener (“mouseout”, function () {
// you could use the .toggle() method to apply a css class “hide” 👻
menu.classList.toggle(“hide”);
});

Again, seeing your javascript and svg code would help us understand how to implement your mouseover trigger.

Hope that helps

#3

var params = { container: document.getElementById(‘lottie’), renderer: ‘svg’, loop: true, autoplay: true, animationData: animationData };
var anim; anim = lottie.loadAnimation(params);

My js code. :slight_smile:

#4

mmh, I see.

If you make your project clonable I could have a better look and see if my method is the right one for you to use with lottie.