Lottie-web: Trying to add JS Function to ID

[Madrise]

Hey, I'm very new to Javascript and I've been trying to create an animated drop-down with bodymovin. I added id's (#) to my layers in after effects and I want to add hyperlinks and anim.playSegments to some of those ids but I can't seem to make it work. Any ideas? They are all in the same json.

EDIT: I managed to do it but it only works on Chrome, it doesn't work on Firefox nor Opera and probably the others too, this is the code I used, please help out if you know what is the problem.

Code:

// Open Drop Down //
var jsonData = { "name": "hamburger" };
$(document).ready(function () {
    $("#hamburger").on("click", function () {
        anim.playSegments([[0,20]],true);
    });
});

// Close Drop-Down //
var jsonData = { "name": "closemenu" };
$(document).ready(function () {
    $("#closemenu").on("click", function () {
        anim.playSegments([[20,0]],true);
    });
});

EDIT 2: In Mozilla the code seems to work sometimes but when I refresh it doesnt work again, it's confusing. It works fine in Opera and Chrome.

EDIT 3: It seems it's because the files are too heavy but the gzipped version of bodymovin doesnt work for some reason.

[Jeremy-Knudsen]

Hi Madrise,

Can you share the link to your full code (either a link to your site or a pen on https://codepen.io)? This will help troubleshoot where things are going wrong. I can imagine a couple of problematic things that might be occurring.

First, the playSegments() method is attached to a loaded Bodymovin animation; not to individual layers within the animation. Therefore, I don't believe you can call the playSegments() method from a layer within the loaded animation. Adding IDs to layers within the animation allow you to directly manipulate values of that layer via JavaScript, which is more advanced than what you're trying to do.

Are you able to get the animations to load and playback all of the way through? What does your JavaScript code look like for loading your Bodymovin animations?

Second, you might be attempting to play an animation before it is loaded by Bodymovin. The document might report that it is "ready", but Bodymovin animations still can be loading after the document ready state. This is why there's a DOMLoaded event listener in Bodymovin (NOTE: This is not the same as DOMContentLoaded). DOMLoaded is an event listener that is specific to Bodymovin. Here is a function that I wrote that initializes mouse events only _after_ the Bodymovin animation has loaded:

function initEvents (anim) {
// DOMLoaded event listener that waits for the Bodymovin animation to load before I perform any actions on it
anim.addEventListener('DOMLoaded', function () {
// Define the element to add mouse and touch event listeners to, which is typically a parent element of the SVG; not the SVG itself. Note: "element" is the parent container of the SVG. I use "parentNode" to travel up the DOM.
var parent = element.parentNode.parentNode;
// Mouseover event listener
parent.addEventListener("mouseover", function () {
if (thisAnim.isPaused) {
thisAnim.goToAndPlay(0);
} // if isPaused conditional block
}); // Mouseover event listener
}); // DOMLoaded event listener
};

[Madrise]

Hey, here's a link of the website.

This is the version that only works when you refresh.
_link removed_

And this is the temporary fix that I was talking about
_link removed_

[bodymovin]

Hi @Madrise , as @Jeremy-Knudsen says, you need to attach your click events to the DOMLoaded event of the animation.
When the jquery document ready event is fired, the animation is not loaded yet so your element with id "hamburguer" does not exist.
After your code
javascript anim = bodymovin.loadAnimation(animData);
You should do something in the lines of:
````javascript
anim.addEventListener('DOMLoaded', function(){

$("#hamburger").on("click", function () {
  anim.playSegments([[0,20]],true);
  $("#bodymovin").css("z-index", "4");
  $("#bodymovin").css("transition", "z-index 0s step-end, opacity 0s linear");
  $("#hamburger").css("display", "none");
  $("#hamburger").css("cursor", "default");
  });

})
````

[Madrise]

Thank you bodymovin this worked perfectly! I understand my mistake.

[Aditya88922]

Hello @bodymovin
I am actually having the same problem.
I have created some animation in after effects and then named the layers as per the class name I want.
I am totally new to coding and all I know is HTML and CSS, no javascript knowledge.
I also want to add hyperlinks to my SVG elements, basically want them to work as buttons for some external links.
Is there any reference material on how to do it or can you help me out with the code?
Any help would be appreciated.