Jump to content
Search Community

Animating using Seconds or Frames Preference

Jonathan 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

Hello Everybody,

 

I had a question on what everyone's preference is when animating...

  • Do you prefer seconds or frames when animating?
  • Also in what instances do you suggest animating in frames?

I'm trying to get a better grasp of animating with GSAP using frames. In computer animation when animating, for example 24fps.

 

So in GSAP when animating with frames using the useFrames special property. 

  • What determines the frames per second (FPS)?
  • Does the browser determine the FPS?

Thanks for any help with my questions to better understand using frames with GSAP! :)

Link to comment
Share on other sites

Hi Jonathan,

 

I've never used frames in the JS version, only the AS version but on counted occasions, always went with time. So because of that I always work with seconds. For the same reason I couldn't tell you when to use frames, perhaps when you need a frame by frame, or update by update control of what's going on with the animation and the code. Maybe when creating games, but that's so not my area.

 

I can't remember the post but Jack once said that browsers use the RAF event which runs on 60 fps based on modern screens refresh rates for better results.

 

take a look at this from W3C:

 

http://www.w3.org/TR/animation-timing/

 

But as far as I know this doesn't depend so much in browser capacities, because things could run faster but bottle necks in terms of rendering would cause big issues in this matter.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Typically the default FPS is 60. You can instruct GSAP to animate at a different fps with

TweenLite.ticker.fps(30)
// higher than 60 won't work with requestAnimationFrame though

( the section on 'Customizing the ticker' in the TweenLite docs has more info )

 

I feel like time based rather than frame based is going to be the better choice in the majority of cases. Browsers won't always have a strict framerate (e.g. 60 frames isn't always going to be equal to exactly 1 second) so their duration will be somewhat variable. If the framerate of the browser dips, then the duration of your animation will change accordingly.

  • Like 2
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...