
MetaPong: A JavaScript Animation Library - stevethyc
http://metapong.com/
======
paradite
A default image for the demo would be useful. Like using your own logo:
[http://metapong.com/img/metapong-
logo-565.png](http://metapong.com/img/metapong-logo-565.png)

~~~
stevethyc
Done.

------
PavlovsCat
The 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).

~~~
stevethyc
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.

~~~
stevethyc
Ok, switched to requestAnimationFrame. Removed the param on the variable
system cycle clock speed--not necessary. The right way is to just use
requestAnimationFrame.

------
velcro
The 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)

~~~
stevethyc
Reload and try it now. I'm using a better system clock now and its way faster.

I haven't tried using the transform functions for all movement (just
rotation), but I'll do that next.

------
stevethyc
Also, note the "PongIt" link that appears after you start a new animation.
Cute feature to make a quick animation based on some images. Check out a
timely example that only took me a few minutes to create:

[http://metapong.com/pongit.html?bg=000000&params={%22image_u...](http://metapong.com/pongit.html?bg=000000&params={%22image_url%22%3A\[%22http%3A%2F%2Fthenewpolitical.com%2Fprojects%2Fpresidential-
race-2016%2Fimg%2Fclinton-
head.png%22%2C%22http%3A%2F%2Fthenewpolitical.com%2Fprojects%2Fpresidential-
race-2016%2Fimg%2Fsanders-
head.png%22%2C%22http%3A%2F%2Fthenewpolitical.com%2Fprojects%2Fpresidential-
race-2016%2Fimg%2Ftrump-
head.png%22%2C%22http%3A%2F%2Fthenewpolitical.com%2Fprojects%2Fpresidential-
race-2016%2Fimg%2Fcruz-
head.png%22\]%2C%22count%22%3A%2212%22%2C%22rotate_speed%22%3A%22100%22}&a)

------
chromanoid
Nice 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.

~~~
stevethyc
I struggled with the name, and I agree that doesn't quite capture what it does
and what it's for. Any suggestions for a better short description?

------
edwinjm
1) 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.

~~~
stevethyc
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.

~~~
stevethyc
Ok, I've added the three included example images in there as the default.
Again thanks for the feedback!

------
stevethyc
Thanks to EVERYBODY for all of the quick feedback! Keep it coming!

~~~
veli_joza
I found two problems with the demo:

1) When speed is reduced and bouncing image was touching lower edge, the
slider would appear and glitch the logic. This is on Firefox.

3) After zoom-in, objects off-screen would freeze, unable to cope with their
situation.

------
SeanDav
Still very jerky for me - I am using Firefox under Windows 7

