anime.js - how do I combine animations with different timings?

Question

I would like to apply 2 different anime.js animations on an element. But only the last one is applied.

https://plnkr.co/edit/p5fRlznLA98056SxDmIh?p=preview

$(document).ready(function() {
  anime({
    targets: ".box",
    duration: 2000,
    loop: true,
    easing: 'easeInOutSine',
    direction: 'alternate',
    translateX: 250
  });
  anime({
    targets: ".box",
    duration: 1000,
    loop: true,
    easing: 'easeInOutSine',
    direction: 'alternate',
    scale: 0.5
  });
});

Julian · Accepted Answer · 2017-11-23T14:03:41.537

1

You can merge both animations into one, but the alternate direction can't be applied to specific properties. But you can use keyframes to achieve a similar effect :

  anime({
    targets: ".box",
    translateX: 250,
    scale: [
      {value: .5},
      {value: 1}
    ],
    duration: 2000,
    easing: 'easeInOutSine',
    direction: 'alternate',
    loop: true
  });

edited Nov 23 '17 at 14:03

answered Nov 23 '17 at 10:12

Julian

698
2
8
17

Thank you, but doesn't seem to work: https://plnkr.co/edit/YQEeZTU4pkRUA66TuT3L?p=preview The box's size should oscillate while the box moves. – ESP32 Nov 23 '17 at 10:50
`direction` is set to the whole animation, and can't be specified to a single property. But you can achieve a similar using keyframes. I updated the code example to reflect that. – Julian Nov 23 '17 at 14:02
Thank you, Julian. Your updated code works. https://plnkr.co/edit/x5hPeXBWmuOZOqogJuce?p=preview – ESP32 Nov 23 '17 at 14:27

anime.js - how do I combine animations with different timings?

1 Answers1