SVG's loaded in with JQuery don't animate with anime js

Question

I am currently working on an animation with the line drawing function in anime js but can't seem to figure out why it won't work. On my end I am loading in the SVG with a load function in Jquery like this

$("#testdiv").load("/svg/titles.svg")

The SVG loads in and looks exactly how I would write it in the HTML but doesn't have any of the animations I've created with anime js.

anime({
  targets: '.orgChartSVG path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

The animation won't work this way but it will work when the SVG is loaded directly into the HTML. I went ahead and tried loading the SVG directly into the HTML and it works fine like I expected but I am not sure why this is the only way it works. I then went ahead and changed the function to look like this but it still won't work.

  $("#testdiv").load("/svg/titles.svg", function(){
    $("#testdiv").on("click", function(){
      anime({
        targets: '.orgChartSVG path',
        strokeDashoffset: [anime.setDashoffset, 0],
        easing: 'easeInOutSine',
        duration: 1500,
        delay: function(el, i) { return i * 250 },
        direction: 'alternate',
        loop: true
      });
      console.log("clicked");
    });
  });

I am assuming that anime js doesn't interact with elements that aren't loaded directly into the HTML or maybe the SVG isn't loading asynchronously but I have it loaded immediately when the page runs so any remedies or input would be greatly appreciated.

Answer 1

Anime.js animations are evaluated once, at the instant they are created. Anime.js uses CSS selectors, but it's not like CSS where things are constantly re-evaluated. The instant you call anime(), anime.js goes out once, finds all matching elements once, and animates them. If you load a new SVG in later, nothing will happen, it missed the train.

Because you're looping things and staggering them, it's a bit difficult to come up with a clean solution that would animate seamlessly within the framework of anime.js. I think the simplest solution within anime.js is to get your hands dirty. Assign your anime() to a variable, and when you load a new element in, reach into its internals and manually insert your new element as if it was always there.