Animatable: One property, two values, endless possiblities

http://leaverou.github.io/animatable/

by Dekku • 13 years ago

97 19 13 years ago

leaverou.github.io

ars• 13 years ago

#15 is broken - sort of. It works, but breaks the page layout.

keerthiko• 13 years ago

Not for me in Chrome.

Skalman• 13 years ago

Yeah, it seems to work better in Chrome than in Firefox. :-(

sp332• 13 years ago

Even in Chrome, 22 pushes 24 right off the end of the line which means everything after that randomly jumps around.

RyanZAG• 13 years ago

This is actually a really good learning tool for showing people what different html/css properties do by visually showing the ranges and effects they give.

augustl• 13 years ago

The demo works in Firefox, not just Chrome. What is this, some kind of standard that works across many different implementations? ;)

Too often do demos for showing off the web work well only in Chrome. This one works fine in Fireox, the animations are very smooth. I'm on a very basic Arch Linux setup I installed a couple of days ago, with no configs in any way other than installing the correct driver for my on-chip Intel GPU. So if it works for me, it should work for most people.

icesoldier• 13 years ago

Even better, most of the demos work fine in IE10! It's like everyone is converging on some kind of central specification on how web pages can animate...

cobrabyte• 13 years ago

Hmm. Working for me in Chrome. OS X & Chrome Version 28.0.1500.71

AmitRele• 13 years ago

works excellent in Chrome

rjbwork• 13 years ago

This is really cool! I'm in my first job where I'm having to touch some front end things, and this is definitely going to come in handy in learning how various style elements work and interact with one another. Who knows, maybe I'll end up using this library in some stuff!

chuckd1356• 13 years ago

#35 gives me a seizure if my mouse isn't perfectly still while hovering.

jwarren• 13 years ago

I highly recommend front-end developers keep up to date with Lea Verou's blog and talks. She's a great ambassador for standards-based development and maintains a great sense of whimsy.

I really recommend her recent talk on border-radius, for example: http://vimeo.com/67567648

da02• 13 years ago

Thanks for the recommendation and video link.

I had no idea who Verou was. I'm so behind.

edwinvdgraaf• 13 years ago

Source can be found on: https://github.com/leaverou/animatable/

carrollgt91• 13 years ago

All of the border-width examples act somewhat strangely on Chrome and Firefox both.

Otherwise, this is great. I love these demos as they really give you an intuitive sense of how CSS works.

sequoia• 13 years ago

#19 shows an interesting bug (I believe a bug) in outline styles: the z-index of the outline is above all previous elements but below all elements that follow (chrome). I hope this is fixed cuz I'd like to use outline.

Another awesome demo from Lea Verou!!

innguest• 13 years ago

Why is everyone fawning over something we all here could easily make in Flash?

This problem was solved 10 years ago, people. Let it be a reminder that we've regressed.

usingpond2• 13 years ago

I refuse to believe you earnestly do not understand why people have ditched Flash for most animation on the web today.

usingpond2• 13 years ago

Is this a script that does something, or just a demo for what most frontend developers already do on a daily basis?

Animatable: One property, two values, endless possiblities

Related Stories