Play animation in reverse

Hi,
I have a simple animation where the object moves from left to right. I want the animation to play (after one cycle) in reverse i.e, from right to left.
I tried the following code

document.getElementById('disassemble').addEventListener('click', function () {
      api.setSpeed(-1);
      api.setCycleMode('one');
      api.play();    
      } );
 });

On clicking the button the object moves immediately to the left. But I want the object to animate from right to left.

Thanks

Hi @saravananps,
most API methods use callbacks. This usually means you must wait for the callback before you’ll see results from your API call. You can rewrite your code with callbacks like so:

document.getElementById('disassemble').addEventListener('click', function () {
  api.setSpeed(-1, function(err) {
    api.setCycleMode('one', function(err) {
      api.play()
    });
  }); 
});
1 Like

Hi @klaasnienhuis

Thanks for your reply.
I have added your code, but the animation is not playing in reverse.

I have given the my entire code below

var iframe = document.getElementById( 'api-frame' );
var version = '1.12.1';
var client = new Sketchfab( version, iframe )

var uid = '2b8efe6ce94c48aa90d505db53c57da9';

var animationsList;
var current_anim;

client.init( uid, {
    success: function onSuccess( api )
    {
        api.start();
        
        api.addEventListener( 'viewerready', function() {
            //API is ready to use
            console.log( 'Viewer is ready' );
       
      api.getAnimations(function (err, animations) {
        
        animationsList = animations;
        if (animations.length > 0) {
          current_anim = 0;
          api.setCurrentAnimationByUID(animations[current_anim][0]);
                            
        }
      });
      
      document.getElementById('assemble').addEventListener('click', function () {
  api.setSpeed(1, function(err) {
    api.setCycleMode('one', function(err) {
      api.play()
    });
  }); 
});
              document.getElementById('disassemble').addEventListener('click', function () {
          api.setSpeed(-1, function(err) {
            console.log("executingggg");
            api.setCycleMode('one', function(err) {
              api.play();
            });
          }); 
        });
          
        });
    },
    error: function onError() {
        console.log( 'Viewer error' );
    },
    ui_stop: 1,
    ui_animations: 0,
    animation_autoplay: 0,
    preload: 0,
    autostart: 1,
    camera: 0
    
} )


// GUI Code

function initGui() {
  var controls = document.getElementById('controls');
  var buttonsText = "\n<button id=\"assemble\">Assemble</button>\n    <button id=\"disassemble\">Disassemble</button>\n ";
  controls.innerHTML = buttonsText;
}
initGui();

Hi @saravananps,

Here’s a codepen that should cover your use case: https://codepen.io/klaasnienhuis/pen/MWqGeRw?editors=1010

Apparently, when you set the cyclemode of the animation to one, the animation will only play if the start time is in the right position. If you want to play forward, the start time needs to be at the beginning of the timeline. If you want to play in reverse, the start time should be at the end of the timeline. Makes sense, but I didn’t know.

If you want to capture all that in one function, it would be something like this:

api.pause()
  api.seekTo(endtime)
    api.setCycleMode('one')
      api.setSpeed(-1)
        api.play()

Of course, this should all be nested in callbacks.

Hi @klaasnienhuis

Thank you very much for your support.

1 Like