Problem with multiple button in a table about mojs HOT 6 CLOSED

Hi, thanks for the issue!

Just add isShowEnd: false to your bursts, so their markup will be hidden completely after animation ends, so it won't inеrfere with the mouse pointer. codepen demo

Cheers!

from mojs.

wow..you are fast, and that solved my problem :)

Another issue I noticed, is that after some button clicks, it seems the animation are starting to becoming "heavy" and with some delays..but it could be my browser ...

Feel free to use the codepen in your documentation if needed :)

Thanks !!

from mojs.

@jcorreia welcome! That's because you create new instances of the bursts every time user clicks the button, so you are ending up with lots of modules and playing all of them at once afterwards.

You can use replay method instead:

  // create timeline and bursts for every button
  var timeline = new mojs.Timeline;
  timline.add(  new mojs.Burst({ ...opts }),  new mojs.Burst({ ...opts }) );

// replay timeline on every click event
 $('#js-button').on( 'click', function () {
   timeline.replay();
  } );

This will ensure you don't create redundant modules on each click event.

You can even use just one pair of the bursts for all buttons with help of tune method which will adjust position of the bursts::

  // create just one timeline and bursts pair
  var timeline = new mojs.Timeline;
  var burst1 = new mojs.Burst({ ...opts });
  var burst2 = new mojs.Burst({ ...opts });
  timline.add(  burst1,  burst1 );

 $('.button').on( 'click', function (e) {
   burst1.tune({  x: e.pageX, y: e.pageY });
   burst2.tune({  x: e.pageX, y: e.pageY });
   timeline.replay();
  } );

But this way, don't specify parent for your bursts - it should be appened to body .

from mojs.

Hi,
Thanks for the code to optimize this.
I dont think your first option would work, because I´m already using replay, and if it was done like you show I wouldn´t have any way to pass the parent to the burst options...unless theres something I´m missing :)

I´ve tried your second option and it works, but the burst are not on the buttons. They are in the right lower corner.
I´ve made a codepen to show this: https://codepen.io/jcorreia/pen/GqaqXE

thanks :)

from mojs.

Hi, that's because your bursts are in the center by default and you defining the shift with the x/y properties, so your animation is in the center + pageX position. You can fix that by setting left and top to 0 on bursts. codepen demo

from mojs.

Thanks :)
That worked out and indeed it is much more faster now.

from mojs.