Jump to content
Search Community

Modify frame per second(fps) onStart() and onComplete()

Pons test
Moderator Tag

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 working on a HTML application which runs in an embedded device. There is a GSAP animation using TweenLite. For performance improvement I would like to do some tweaks in the frame per second of the animation. For a smooth animation, I need a fps(40) and as soon as the animation is complete, I would like to change the fps to fps(0).

 

TweenLite.to($(element), 0, {
    scale: 0.95,
    opacity: 0,
    onStart: function () {
        TweenLite.ticker.fps(40);
    },
    onComplete: function () {
        $(element).css("transform", "none");
        done();
        TweenLite.ticker.fps(0);
    }
});

 

But the animation is always taking fps(0). onStart TweenLite.ticker.fps(40); is not working. In stead of onStart, I also tried it as below.

 

TweenLite.ticker.fps(40);
TweenLite.to($(element), 0, {
    scale: 0.95,
    opacity: 0,
    onComplete: function () {
        $(element).css("transform", "none");
        done();
        TweenLite.ticker.fps(0);
    }
});

 

Anyone have some idea regarding this? Thanks in advance!

Link to comment
Share on other sites

Hi Pons,

 

Welcome to the forums!

 

I understand your logic of trying to reduce the fps to improve performance in embedded devices but I don't think changing GSAP's tick frequency will add anything to it.

 

The main thing is that GSAP uses Request Animation Frame for its timming and that is triggered by the browser (or whatever is environment is containing your code). If your environment has a fps of 40, GSAP will run at 40 frames per second, if it has more (as browsers usually do) it will run at such framerate.

 

Moreover, once the tween is done, changing GSAP's fps to 0 will not give you any performance benefit as GSAP is not controlling the actual rate of frame refresh on your device.

 

Does that help?

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Yes, see bellow.

 

See the Pen 749b1bbbb157f1c86e6a6ccc7fcc06b6?editors=0011 by dipscom (@dipscom) on CodePen

 

Do bear in mind, you are only changing how frequent GSAP fires its tick call, it will have no effect on anything else beyond GSAP.

 

Here's a challenge for you: Can you see what I have done differently from you? If yes, why did your code fail? :)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

The code seems similar. In my case the animation is called multiple times, its a screen transition animation. So each time user navigate to another screen, this tween is called. In the first run, fps is 12 but from the second time onwards fps seems to be 1. In your example, I added a button and the animation is performing onclick. On the first click fps is 12 and animation is some what smooth, but from the second click, its jumps to the final position with fps 1.

 

console.clear();

function animatebox(){
  // Set a linear ease for a better visualisation
  TweenLite.defaultEase = Linear.easeNone;

  TweenLite.to(
   '.box',
   1,
   {
    x: 100,
    onStart:function() {
     console.log('Start')
     TweenLite.ticker.fps(12);
    },
    onComplete:function() {
     console.log('Complete');
     TweenLite.ticker.fps(1);
     // Tween the box back to show the different fps
     TweenLite.to('.box', 1, {x:0})
    }
   }
  )
 }

 

<button onclick="animatebox()">animate</button>
<div class="container">
    <div class="box"></div>
</div>

 

Link to comment
Share on other sites

The bit I was trying to bring to your attention was the fact that you had the fps set to zero. With such setting, the tick will never run, right? It's zero. So, no matter what you do after it should never trigger because the engine will not update itself as it's zero frames per second.

 

Going back to what you are trying to accomplish. I've updated the Pen I created for you above to have a button that runs the animation just like you described. The reason it was not working as you thought it would right out of the box was because of the request animation frame. Again, you don't know when that method is going to be called, it might be immediately, it might be a few milliseconds later. In computer speed, that makes a big difference, specially if you were messing around with how frequently GSAP is calling its own tick method.

 

Look at this excerpt from the documentation on the ticker:

Quote

When using requestAnimationFrame (the default), the fps() setting acts like a throttle. Since you cannot tell the browser to crank outrequestAnimationFrames at a higher rate than 60fps, you can't do something like TweenLite.ticker.fps(100) (well, you can but it'll still run at around 60fps). You could, however, do TweenLite.ticker.fps(30) and the engine will skip beats when necessary in order to get you as close as possible to 30fps (or whatever fps you set below 60).

 

In order to get the behaviour you want, you need to turn off the request animation frame and use the setTimeout version of the tick. That way, you are forcing the tick to be fired at a regular interval, not matter what, even if the browser is not ready to render the frame. Which, is actually worse than the request animation frame as you might end up clogging the main thread depending on how much code you are running.

 

Having said all that, it does work. Refer back to the pen above and you will see it animating with two different framerates.

 

Happy Tweening!

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...