Wanted to explore additional animation techniques in AFRAME using ANIME, but can't get it to work

Question

As the title suggests - having trouble getting this to work.

Tried like this as per this link

var anime = AFRAME.ANIME;
const panel = document.getElementById('bg-panel2');
    function anim1() {
        anime({
            targets: 'panel',
            translateX: 250,
            direction: 'alternate',
            loop: true,
            easing: 'linear'
        })
    } 

    anim1();

Nothing happens - tried as a component too, but would rather just be able to fire an animation using anime wherever I need to rather than making a separate component each time. If there are any examples of using anime with aframe you could point me too I'd appreciate it.

Answer 1

The targets property is supposed to be a css selector as a string or (list of) live objects, not a variable name as a string. Here's an example of changing the radius attribute of a a-sphere:

var anime = AFRAME.ANIME; // grab the anime reference
anime({
  targets: 'a-sphere',    // a CSS selector of the sphere
  radius: 2,              // the attribute that is supposed to be changed
  direction: 'alternate', // alternate direction
  loop: true,             // loop the animation
  easing: 'linear'
})

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-plane rotation="-90 0 0" scale="8 8 8" color="#7BC8A4"></a-plane>
</a-scene>