FPS Examples

[jermbo]

I am trying to do a FPS test on my animation, but I am not sure I fully understand how and why the speed test example is working. 

I have forked a couple of the GSAP examples and added the fps code, but everything is overing around 90 - 101 fps. Is that right? Can some one explain to me how to properly get FPS in any animation?

 

I have messed with the animations a little bit, trying to get them to show a different result than 100 fps..

 

Here are some of the examples I have forked. 

See the Pen azyGVd by jermbo (@jermbo) on CodePen

See the Pen NPvMvO by jermbo (@jermbo) on CodePen

See the Pen azyGJv by jermbo (@jermbo) on CodePen

See the Pen BydxZx by jermbo (@jermbo) on CodePen

See the Pen azyGEN by jermbo (@jermbo) on CodePen

[GreenSock]

It's probably best for you to just use the FPS tool built into Chrome's Dev Tools or something. 

 

If you want to use a simple requestAnimationFrame-based one that updates every second, you could drop a <div id="fps"></div> into your HTML and then this JS: 

var fps = document.getElementById("fps"),
    startTime = Date.now(),
    frame = 0;

function tick() {
  var time = Date.now();
  frame++;
  if (time - startTime > 1000) {
      fps.innerHTML = (frame / ((time - startTime) / 1000)).toFixed(1);
      startTime = time;
      frame = 0;
}
  window.requestAnimationFrame(tick);
}
tick();

[jermbo]

This is perfect! Thank you. The reason I need the display is because I am doing testing on mobile devices that I don't always have access to dev tools. 

[jermbo]

I noticed things didn't work on the phone, and I figured out that it's because the requestAnimationFrame. Here is an example that would work in a lot of different situations.  I see Chrome gives me a waring, telling me to use the standard 'requestAnimationFrame', but I can live with a warning.

// FPS Tests
var fps = document.getElementById('fps'),
    startTime = Date.now(),
    frame = 0,
    requestAnimationFrame = window.requestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

function tick() {
    var time = Date.now();
    frame++;
    if (time - startTime > 1000) {
        fps.innerHTML = Number(frame / ((time - startTime) / 1000)).toFixed(1) + ' fps';
	startTime = time;
	frame = 0;
    }
    requestAnimationFrame(tick);
}
TweenLite.delayedCall( 1, tick );