Animatable: One property, two values, endless possiblities • Hacker News Board

Re: Animatable: One property, two values, endless possiblities

#11

Post by edwinvdgraaf » Thu, Aug 01, 2013, 12:43 PM UTC

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

Re: Animatable: One property, two values, endless possiblities

#12

Post by sp332 » Thu, Aug 01, 2013, 12:43 PM UTC

keerthiko wrote: post #4

ars wrote: post #2

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

Not for me in Chrome.

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

Re: Animatable: One property, two values, endless possiblities

#13

Post by carrollgt91 » Thu, Aug 01, 2013, 1:32 PM UTC

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.

Re: Animatable: One property, two values, endless possiblities

#14

Post by icesoldier » Thu, Aug 01, 2013, 2:41 PM UTC

augustl wrote: post #5

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 I…

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

Re: Animatable: One property, two values, endless possiblities

#15

Post by sequoia » Thu, Aug 01, 2013, 3:15 PM UTC

#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!!

Re: Animatable: One property, two values, endless possiblities

#16

Post by cobrabyte » Thu, Aug 01, 2013, 3:57 PM UTC

augustl wrote: post #5

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 I…

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

Re: Animatable: One property, two values, endless possiblities

#17

Post by da02 » Thu, Aug 01, 2013, 6:41 PM UTC

jwarren wrote: post #10

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

Thanks for the recommendation and video link.

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

Re: Animatable: One property, two values, endless possiblities

#18

Post by innguest » Fri, Aug 02, 2013, 3:52 AM UTC

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.

Re: Animatable: One property, two values, endless possiblities

#19

Post by usingpond » Fri, Aug 02, 2013, 3:27 PM UTC

innguest wrote: post #18

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.

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

Re: Animatable: One property, two values, endless possiblities

#20

Post by usingpond » Fri, Aug 02, 2013, 3:27 PM UTC

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