OnClick Animation Follow Through

[2fernandez]

Hi Julian, thank you for this brilliant plugin. I am not sure if this should be classed as a problem or I am using anime.js the wrong way.

What I am trying to do: What I wanted to happen was to scale a ball to 2 when a button (step 1) is clicked, and then scale this ball back then when q button (step 2) is clicked. I've used a timeline for the animation as I am hoping to add further steps in the animation on click of each step.

The problem My problem is that Step 2, does not continue by using the resized parameters from step 1. It always just jumps back to the original without animating. And I would really like it to continue from the point at which it is left off.

I've been struggling with trying to find a solution with this. Any help would be greatly appreciated.

Here is my code:

` jQuery(document).ready(function() {

    var tl = anime.timeline({
      easing: 'easeOutExpo',
      duration: 750,
      autoplay: false,
    });

    var t2 = anime.timeline({
      easing: 'easeOutExpo',
      duration: 750,
      autoplay: false,
    });

    tl.add({
      targets: '#master',
      scale: 2,
    });

    t2.add({
      targets: '#master',
      scale: 1,
    });

    document.querySelector('#step_1').onclick = tl.play;
    document.querySelector('#step_2').onclick = t2.play;

  } );`

[alexchantastic]

If you want to accomplish this with a timeline, you'll want to encapsulate everything into a single timeline and then play/pause depending on the sequence you want to show. Another similar solution could be done using keyframes.

However, a better method that is probably easier to maintain is to separate out your steps into separate animations rather than using a timeline or keyframes.