Trying to add JS Function to ID

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.

[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

anim = bodymovin.loadAnimation(animData);

You should do something in the lines of:

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");
  });


})

[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 };