www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript requestAnimationFrame

  1. #1
    Join Date
    Apr 2013
    Posts
    2

    Javascript requestAnimationFrame

    Hi there,

    Let me introduce myself first: My name is Marciano, currently 21 years old, and took a dive into webdevelopment since Flash got less popular. My programming/scripting skills and interests consists of PHP, Javascript, HTML/CSS and ActionScript 3.

    Now, since I got into Javascript, I was wondering how to create animations with 'pure' Javascript. As I learned from ActionScript the Enter_Frame event (Which checks every frame if something happened) I searched the web around for something like that, only for Javascript. I came upon "setInterval", but as you maybe will know, that this method of animating is not recommended. So I came upon "request animation frame". I tied searching tutorials of it and starting to play around with it. I came up with this code:

    Code:
    var add = 100;
    
    function loop()
    {
    	var el = document.getElementById("content");
    	var w = parseInt(el.width);
    
    	el.style.width = add + "px";
    
    	//console.log(w)
    	window.requestAnimationFrame(loop);
    
    	
    
    }
    
    loop();
    But! It won't work as I expected. When I use console.log(); it does repeat the function many times, but it does not increment the value. Why is that? Can somebody explain what I'm doing wrong?

    Much thanks,

    MarcianoSR

  2. #2
    Join Date
    Apr 2013
    Posts
    2
    Found the solution. I forgot to increment the "add" variable. So the good code should be :

    Code:
    var add = 100;
    
    function loop()
    {
    	var el = document.getElementById("content");
    	var w = parseInt(el.width);
    
    	el.style.width = add + "px";
    
    	//console.log(w)
    	window.requestAnimationFrame(loop);
    	add++;
    
    	
    
    }
    
    loop();
    Stupid thing I forgot.


    Thanks anyways.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles