Animify - feedback needed

touch_the_sky 103 Sep 11, 2011 at 17:12

Hi everyone,

This thing has been with me for a loooong time, but there was always something else stealing my time.

But now, finally, I started putting it all together.

So - in short - It’s a free jQuery plugin, enabling some cool (hopefully;) <canvas> animations to your <div> elements, etc. It may be buggy & slow at the moment, but I am working on it. If it’s a little bit of this ‘yet another’ something - I am working on it. I want to make something which ‘just works’, ‘always does the right thing’ if that makes sense. And yes, there IS a bigger concept behind it.

So If you could possibly have a look at and give me some feedback / suggestions regarding the plugin I would appreciate it a lot. There is plenty of bugs / issues I have to resolve (in fact, there is a total re-structure from a scratch on it’s way) at the moment, but your feedback may potentially give me some good ideas at this early stage.

I know it’s not a webdev forum, that’s exactly why I’m posting here - I got some opinions from my colleagues already but your ‘different approach’ input may be greatly valuable actually.

If your cat suddenly dies, you get sick, or there is some js conflict after you include the plugin, it’s probably Animify’s fault;)


9 Replies

Please log in or register to post a reply.

touch_the_sky 103 Sep 12, 2011 at 12:44


Come on guys, it’s not like I want you to pay for something or anythig

alphadog 101 Sep 12, 2011 at 14:27

I guess what I would look for is extensibility, rather than being at the mercy of your designs. :) How do I add my own effects? Maybe you can add a system to hook in my own stuff?

Anyways, pretty cool. Thanks for sharing.

touch_the_sky 103 Sep 12, 2011 at 14:41

Thanks for feedback alphadog,

Primary focus is making it ‘think for you and doing it right’.

However, adding your own effects (plugs for a plug lol;) is something I definitely considered. There is a few things to do before I get my head round it though - mostly making the rendering more efficient, fixing bugs, optimising for mobile sites + hopefully some good hardware acceleration (it would make sense then to do stuff which would be waaay too slow on bare canvas2d context). Then it would be desirable to let ‘the experienced’ users create their own bespoke visuals with Animify.

So the answer is yes, but still some proper work to do before we get there.

touch_the_sky 103 Sep 18, 2011 at 23:26

Just a bit of an update - v 0.46 is out

First thing you may notice is the new ‘intro’ feature, enabled for each effect by default (can be switched off) - at the moment all it does is it makes the effect gradually emerge (fadeIn()), but I’m planning to have some more options there

‘posterize’ - another little param you can add to the ‘film-noir’ effect. Work in progress. See demos.

Also, the debug toolbar has been included in this release. At the moment you can only check performance, but there’s more to come.

And last but not least, the ‘validation concept’ has been introduced. Basically - as the effects are tweakable (users can make them very heavy) / some devices, computers are still slow etc. - the script should gracefully p#!s off if it’s impossible for it to perform. And so it does;)

So, please take a look at the Demos / Benchmarks and tell me what you think

Much appreciated

TheNut 179 Sep 19, 2011 at 02:38


If your cat suddenly dies, you get sick, or there is…

Oh my gawd, save teh kittens! :lol:

Looks cool. I’m thinking ads would benefit the most from this as it’s a pretty catchy method that doesn’t required a 500k swf. I think if you add some transitional effects and more default effects, it could be a useful tool for web game developers that rely on the canvas. I’ve played tetris and worm clones that had similar animating backgrounds. Quite relaxing and it blends in with all my lava lamps :)

The benchmarks ran well on my system, but there is a slight stutter (more like jolt) every now and then, regardless of what demo I ran.

touch_the_sky 103 Sep 19, 2011 at 10:55

Quite relaxing and it blends in with all my lava lamps

Haha awesome;) I think ads may be a good idea, epsecially if I added a chance to work with multiple (background) images (plus transitions as you mentioned), etc.

The jolt / stutter thing - did you use FF by any chance? When my pc is loaded with various soft running (resource usage pretty much maxed), it happens to me in Firefox every now and then - didn’t have this in Chrome though.

Anyways, let’s see how it goes with future updates when I start using requestAnimationFrame as much as possible + force translateZ on the canvas

touch_the_sky 103 Oct 03, 2011 at 00:52

Right then, v 0.47 is live!

Unfortunately, I did not manage to get them perlin octaves perform very well on this occasion;( I need to re-work some things first, so the next update will be slightly bigger (well, there is most likely a total re-structure planned, yep)

Other positive side effects of all that pixel-playing I’ve done include:

New age tweak for film-noir effect


All new grunge effect I just started working on

Check them and tell me what you think

hamburg113 101 Oct 05, 2011 at 00:59


Thanks very much for this comment. It help me to think about my ideals.

Tks again and pls keep posting.

If you want to get more materials that related to this topic, you can visit:

Best regards.

touch_the_sky 103 Oct 10, 2011 at 11:48

0.48 is out now.

Aging and grunge (still work in progress) have been re-made. An observation - at least for me, Firefox renders the 2 effects using globalAlpha in a more visually pleasing way (it’s not faster than the webkit though). What do you think?

Also, if anyone is tempted to download the plugin and try for themselves - always set background-color of a target element, ideally via CSS (or effect param). Otherwise you may be hit by the ‘d[2] is undefined’ error (Firefox).

There is a bigger, better, much more stable release coming out in few weeks (depends on how much work I’ve got) so keep your eyes out