Executing animation 2nd time

[chris-haste]

Hi,
Firstly, what a great library! I've only just started looking at it but it looks fantastic,
Ok, now my problem. The caveat being that I am new to javascript...

I have an animation that I am dynamically loading into a page. The HTML, CSS and JS are separated into 3 files and 'injected' into the main page on an event.

I have an onload event for when the .js file completes loading and it calls my animations .play() method - the animation has autostart set to false.

When the animation finishes any animation specific HTML is removed from the main page using a function assigned to complete:
The .css and .js files are not removed.

This all works perfectly, for the initial event.

Subsequent events behave slightly differently. The HTML is re-injected into the main page but the .css and .js are not reinserted as they are already present. The other difference is that the event calls the animations .restart() method and not the play() method.

On these events the HTML gets injected correctly (exactly the same as previously), calling the animation's .restart() does not generate any errors and, after a period of time equal to the animation's duration, the animation specific HTML gets removed (so the function assigned to complete is getting called.... But....
The animation does not actually happen

It is probably something stupid that I am doing but I would appreciate any pointers

The animation code (fly.js)

var path = anime.path('.fly-reaction path');

var gameReaction = anime({
  targets: '.fly',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  autoplay: false,
  duration: 10000,
  loop: 1,
  complete: function(anim) {
    // Unload the reaction - defined in main game app code
    reactionUnload('fly');
  }
});

The animation's html (fly.html)

<div class="fly-reaction">
    <div class="fly follow-path"></div>
    <svg width="100%" height="100%" viewBox="0 0 300 200">
    <path fill="none" stroke="red" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
    </svg>
</div>

The onload event for the dynamic insertion of the .js file

const onLoaded = () => {
    console.log('Animation script is loaded!');
    gameReaction.play();
}

The call to replay the animation after the initial event

console.log('Animation html has been reloaded');
gameReaction.restart();

[chris-haste]

I am guessing but the behaviour is the same as if it could not find the target elements.
I thought it may be that the injection of the HTML using innerHTML hadnt finished by the time the animation's restart method was called, but putting a timeout delay between these two actions made no difference.

I modified the animation target code to be this, in an attempt to force another inspection of the DOM but that made no difference

targets: document.querySelector('.fly'),

This is the console log with the debug info. 1st set the animation works perfectly. With the second set, the animation appears, the 'running' debug increments but the animation is static

Animation button clicked
reactions.js:52 Animation container created
reactions.js:83 Animation HTML injected
reactions.js:87 Animation CSS has been injected
reactions.js:90 Animation JS has been injected
reactions.js:4 Animation script is loaded!
reactions.js:6 Animation .play() called
1704fly.js:19 Running
reactions.js:107 Animation HTML removed
reactions.js:44 Animation button clicked
reactions.js:52 Animation container created
reactions.js:60 Animation HTML re-injected
reactions.js:65 Animation restart called
1740fly.js:19 Running
reactions.js:107 Animation HTML removed

[yellow1912]

My guess is that you replaced the Dom elements already. You will probably have to re-init a new animejs instance. Would be nice to be able to destroy old animejs instance as well, but no API for that yet.