Anime: Possibility to set a property

[bravebox]

Hi thanks for Anime.js!

This is more of a question than a issue.

But I was wondering if you could set a property to alter the animation.

For example:
``
var openMenu = anime({
targets: ['.menu'],
translateX: '20rem',
duration: 1000,
autoplay: false,
direction: 'normal',
complete: function() {
console.log( this.translateX ); // logs 20rem
}
});

$(document).on('click', '.hamburger', function() {
openMenu.translateX = '40rem'; // set obj property
console.log( openMenu ); // checks out with new set value
openMenu.play();
});
``

Should this be possible? Or.. :)

thanks!

[jantimon]

This set method would be also nice to change the animation target while the animation is running

[co-l]

I found a way to do so, and I think it would have a lot of value to make it accessible in the public API.

Here is what I did:

startAnimation = anime({
    targets: myObj,
    x: targetX,
    y: targetY,
    duration: 500,
    easing: 'easeOutQuad'
})

With initial values for targetX and targetY (let's say its the position of the user mouse/finger)
I'm capable of altering those values with the following code

startAnimation.tweens[0].to.numbers = [newTargetX]
startAnimation.tweens[1].to.numbers = [newTargetY]

I'm not sure it's exactly following the proper easing function, but it clearly works visually speaking.

Hope this helps 👍

[juliangarnier]

Simply wrap your animation in a function, and make sure to remove the elements from anim before each call.

Like this:

function followCursor(e) {
  var targets = ['.blue', '.green'];
  anime.remove(targets)
  anime({
    targets: targets,
    translateX: e.pageX,
    translateY: e.pageY,
    delay: function(el, i) {
      return i * 80;
    }
  });
}

document.body.onclick = followCursor;

Live example: http://codepen.io/juliangarnier/pen/ozpGdd