Whoever told you that is... confused. Scripted elements on a web page can force the browser to refresh more often than usual, but never less... unless the JS is consuming so many cycles that the entire browser lags out. Speaking of which, as far as I'm aware CreateJS does not have any sort of dirty-rect system like Flash Player does, so it redraws the entire stage from scratch every single frame. That means boosting your frame rate from 24 to 60 would more than double the library's CPU cost. Depending on your scene complexity and the hardware the page is running on, increasing the frame rate could have the opposite of the intended effect.
Importantly, it's recommended by MDN for aesthetic reasons, not technical ones.
Interesting question for which nobody have right answer. I asking myself very often that question. One is sure - 1. with increasing frame rate animations are more and more smoothly, with 60 fps are smooth almost like in old good Edge Animate, 2. it is very complicate to work with too much frames, you must scrool and scrool window in endless.
1 person found this helpful
My only experience with frame rates and SWF games was that the developers always preferred 60 fps because they claimed it triggered code faster. As already mentioned in this thread, that comes with a price. But I think 24 or 30fps will be the perfect compromise.
Thanks for all the responses. One response has been marked correct, however I am still not 100% sure what the "official" position is, or even if there is one. My feeling is that probably 30fps is fine for most things, but that 60fps might be useful if you feel things are looking a bit jerky, and your code is not such that it will melt people's computers at that frame rate.
BTW I was pointed at the following site by the person who originally alerted me to this issue: Jank Free: Let's Make the Web Silky Smooth!
For projects with less CPU, GPU and memory consumption, particulary banners is better to use 60 fps, with 30 fps animations are a bit jerky, animations stutter.
This attitude is exactly why banner ads have a reputation as browser-crippling resource hogs. If 24 FPS is good enough for Star Wars, it's good enough for your banner ad.
Just try this and you will see what I am saying: Classic Tween, Back EaseOut, 0.5 seconds, with 30 fps and 60 fps. 60 fps is must for quick nice effect with Back, Bounce and Elastic easing.
Which do you think looks better: A 30 FPS animation, or a blank space because the user decided they didn't want to deal with a page full of 60 FPS banner ads?
Google Web Designer, Adobe Edge Animate, GSAP and all other app works at 60 fps. 30 fps is jerky, step backward in 21 century. Animation with only 30 fps dont have enough informations for 60 Hz displays.
I have a few thoughts on this.
The web runs at 60fps. Anything less than that is considered jank (as mentioned previously). Here are a few more articles to explain what that means and why:
When you publish from Animate to HTML5 canvas all the rendering is handled by CreateJS (EaselJS, TweenJS).
I could bet any amount of money (if i had it) that Grant Skinner, the creator of CreateJS, will tell you that CreateJS is highly optimized to run at 60fps and should.
Just take a look at the CodePen demos of CreateJS here: CreateJS on CodePen
They all run very smoothly at 60fps and look great.
Pixi.js is another popular canvas library that has amazing performance:
I'd encourage you to explore more demos. they're awesome and run at a silky smooth 60fps
CodePen - Googly Eyes & Stars (pixi and gsap)
All that to prove that the modern browser is more than capable at redrawing even a large canvas 60 times per second with NO hiccups.
Even mobile browsers do well with properly coded canvas animations.
Heck, even SVG animations look awesome at 60fps
Chris Gannon on CodePen (svg + gsap)
Flash Player was more than capable of 60fps back in the early 2000s (of course depending on how vector-heavy things were).
Doing agency work we would sneak in 60fps swf ads whenever we could and they looked soooo much better.
When Stage3D came out, 60fps was what everyone was going for and Flash Player / AIR boasted impressive performance.
As with anything there are of course performance implications to be aware of. If you are animating a bunch of objects with drop shadow filters (which are particularly intensive) performance will take a hit.
IMHO with canvas you should shoot for 60fps for 2 reasons:
- it looks much better
- most browsers can handle it as long as you aren't doing anything too crazy
I'd even recommend 60fps for HTML5 ads (unless a network or vendor specifically states otherwise).
And yes, multiple ads running at 60fps will most likely not be good, but I see plenty that run silky smooth and they don't affect page performance to a noticeable degree. The biggest ad violations I see are multiple videos playing at once. UGH!
-- In regards to Clay's statement about Star Wars running at 24fps: I've never quite wrapped my head around how videos do look amazing at 24fps and no one calls them janky, but a flash ad playing at 30 looks pretty poor compared to 60.
What really confuses me is that I can screen capture a 60fps animation using ScreenFlow and the video looks very nice... even though I'm pretty sure I only capture at 30 and the playback is at 30.
I'd welcome any insight
If anyone wants to see a 30fps vs 60fps side-by-side comparison, let me know. I can probably whip something together over the weekend.