10

Not sure what I'm doing wrong here... 

window.requestAnimFrame = function(){
return (
    window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function(/* function */ callback){
        window.setTimeout(callback, 1000 / 60);
    }
);
}();

function animationSequence(elem, ind) {
    this.ind = ind;
    this.elem = elem;
    this.distance = 450;
    this.duration = 900;
    this.increment = 0;
    this.start = Math.abs(this.ind)*450;
    var requestId = requestAnimFrame(this.animate);
    this.move();

    this.move = function() {
        this.elem.style.left = this.start - this.increment + "px";
    }
    this.animate = function() {
        var self = this;
        this.move();
        this.increment += 5;
        if (this.increment >= 450) { 
            if (this.ind == 0) { console.log("true"); this.elem.style.left = "1350px" }
            cancelAnimFrame(requestId);
        }
    }
    // this.animate();
}
natecraft1
  • 2,737
  • 9
  • 36
  • 56
  • Did you try to place `var requestId = requestAnimFrame(this.animate);` below the `this.animate` function definition? – matewka Feb 26 '14 at 11:07

1 Answers1

35

Ok so help me out if I'm getting you wrong - is your problem that you have lost your reference to this within the animate method? i.e. you can't call this.move() or increment the increment?

If so try this-

 var requestId = requestAnimFrame(this.animate.bind(this));

See this answer about binding with requestAnimation callbacks here.

And this blog post on binding.

Update May 2019

If you can use ES6 you can employ an arrow function, which will maintain scope like this:

let requestId = requestAnimFrame(() => { this.animate(); });

Read about arrow functions here:

Blog post about arrow functions and the keyword this

BlinkingCahill
  • 1,048
  • 14
  • 18