MetaPong: A JavaScript Animation Library
metapong.com
MetaPong: A JavaScript Animation Library
1–10 of 19 posts
Re: MetaPong: A JavaScript Animation Library
#2A default image for the demo would be useful. Like using your own logo: http://metapong.com/img/metapong-logo-565.png
Re: MetaPong: A JavaScript Animation Library
#3The stutter is very jarring, you really should use requestAnimationFrame instead of setTimeout.
And maybe also put the container height into a variable when the window gets resized, instead of grabbing it from the DOM all the time (not sure if that will make a meaningful difference, but I'd try it).
Re: MetaPong: A JavaScript Animation Library
#4[deleted]
Re: MetaPong: A JavaScript Animation Library
#51) A demo that doesn't work when clicking the start button :`-( The developer was too lazy to put in a default image...
2) When using the logo of the page as url and typing a count of 999, the animation is very jerky. Animations with GSAP I saw where much smoother.
Re: MetaPong: A JavaScript Animation Library
#61) A demo that doesn't work when clicking the start button :`-( The developer was too lazy to put in a default image... 2) When using the logo of the page as url and typing a count of 999, the animation is very jerky. Animations with GSAP I saw where much smoother.
Yeah, 999 is a lot of sprites to move around. Point well taken about the example image though. The text in the help actually works. I'll get the insta-start example working.
This library is definitely not meant to complete with something like GSAP. It's a subset of functionality to allow a quick and fun animations and it just uses CSS to animate so it's not for hard-core games and so forth.
Re: MetaPong: A JavaScript Animation Library
#7The stutter is very jarring, you really should use requestAnimationFrame instead of setTimeout. And maybe also put the container height into a variable when the window gets resized, instead of grabbing it from the DOM all the time (not sure if that will make a meaningful difference, but I'd try it).
I'll look into requestAnimationFrame.
I will a/b test the window size var, but I suspect it won't make a difference. But I'll try it.
Re: MetaPong: A JavaScript Animation Library
#8Nice little script you got there!
But I don't think you should call it an "Animation Library". An animation library is much more to me.
For comparison, TweenJS is a animation library.
Re: MetaPong: A JavaScript Animation Library
#9The stutter is very jarring, you really should use requestAnimationFrame instead of setTimeout. And maybe also put the container height into a variable when the window gets resized, instead of grabbing it from the DOM all the time (not sure if that will make a meaningful difference, but I'd try it).
I'll look into requestAnimationFrame. I will a/b test the window size var, but I suspect it won't make a difference. But I'll try it.
[deleted]
Re: MetaPong: A JavaScript Animation Library
#10The animation quality is really bad i.e. jerky. The best advice for smooth animation is to leave DOM alone as much as you can.
1) cache all that you can in variables (i.e. not only cache DOM access but group/batch it). 2) implement requestAnimationFrame. but most of all 3) don't animate top/left properties - instead work with GPU-accelerated ones like transform (not only will they perform faster as no reflows/pains are needed - but the movement will also be sub-pixel i.e. smoother)