Jump to content
GreenSock

jermbo

FPS Examples

Go to solution Solved by jermbo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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();
  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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. :P

// 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 );
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×