Destroying the instance

[arnasziedavicius]

Great little script!

Was wondering if there's a way to destroy the instance?

I have a situation where Marquee3k keeps initialising and as a consequence accelerating the speed.

[tristantbg]

Same problem. I found a way of preventing it by giving an id to the animation frame : Line 141 : animationId = window.requestAnimationFrame(animate);

Then kill it on init : Line 124 : window.cancelAnimationFrame(animationId);

[pbridi]

Thank you @tristantbg, this works like a charm. Any chance of adding this to a pull request?

[thibaudallie]

not work for me, get an Uncaught ReferenceError: animationId is not defined @pbridi @tristantbg

[ernestobellei]

@tibuakaw Have you declared the animationId variable?

[sonn-gamm]

hi! trying to implement the animationId trick as well, but not working. Here the complete code:

static init(options = { selector: 'marquee3k' }) {
      var animationId; // set variable
      window.cancelAnimationFrame(animationId); // kill it;
      window.MARQUEES = [];
      const marquees = Array.from(document.querySelectorAll(`.${options.selector}`));
      let previousWidth = window.innerWidth;
      let timer;

      for (let i = 0; i < marquees.length; i++) {
        const marquee = marquees[i];
        const instance = new Marquee3k(marquee, options);
        MARQUEES.push(instance);
      }

      animate();

      function animate() {
        for (let i = 0; i < MARQUEES.length; i++) {
          MARQUEES[i].animate();
        }
        animationId = window.requestAnimationFrame(animate); // save values to variable
      }

i'm doing this on a js-spa website, and any time i'm mounting / unmounting a component the speed of the marquee keeps increasing.

am i setting the variable at the wrong place?

thanks, af

[GoAndrew]

hi! trying to implement the animationId trick as well, but not working. Here the complete code:

static init(options = { selector: 'marquee3k' }) {
      var animationId; // set variable
      window.cancelAnimationFrame(animationId); // kill it;
      window.MARQUEES = [];
      const marquees = Array.from(document.querySelectorAll(`.${options.selector}`));
      let previousWidth = window.innerWidth;
      let timer;

      for (let i = 0; i < marquees.length; i++) {
        const marquee = marquees[i];
        const instance = new Marquee3k(marquee, options);
        MARQUEES.push(instance);
      }

      animate();

      function animate() {
        for (let i = 0; i < MARQUEES.length; i++) {
          MARQUEES[i].animate();
        }
        animationId = window.requestAnimationFrame(animate); // save values to variable
      }

i'm doing this on a js-spa website, and any time i'm mounting / unmounting a component the speed of the marquee keeps increasing.

am i setting the variable at the wrong place?

thanks, af

Just write in unmounting function window.MARQUEES = null

[muni2explore]

var animationId; //

@tibuakaw @GoAndrew @afincato

you are creating local variable, that will reassigned to undefined every-time if you call init(). So please create as global variable window.animationId like and do it at top of the library. I am sure it will work.

if(window.animationId){ window.cancelAnimationFrame(window.animationId); }

[sonn-gamm]

@muni2explore thanks that worked!

[arnasziedavicius]

Just made a pull request with set animation ID as per @tristantbg comment: https://github.com/ezekielaquino/Marquee3000/pull/25