animation Archives - Broken Links Archive

Animating an Offset Value in SVG

In a lit¬≠tle exper¬≠i¬≠ment I‚Äôm work¬≠ing on I recent¬≠ly found a bit of a show-stop¬≠ping prob¬≠lem. After an APB on Twit¬≠ter I got a rapid reply which helped me solve it, but it seems that I may be the first per¬≠son to encounter this error, there¬≠fore it‚Äôs encum¬≠bent on me to doc¬≠u¬≠ment it. So this is that.

Read the full article


A Busted Neon Sign with CSS Animations

For no par¬≠tic¬≠u¬≠lar rea¬≠son oth¬≠er than idle curios¬≠i¬≠ty, I made a demo of a bro¬≠ken neon sign, using CSS Ani¬≠ma¬≠tions (you‚Äôll need Fire¬≠fox 5, Safari or Chrome to see it). It does¬≠n‚Äôt degrade well at the moment, the root cause of which is down to what I think is a bug in Fire¬≠fox‚Äôs imple¬≠men¬≠ta¬≠tion ‚ÄĒ I‚Äôll need to con¬≠firm that.

One quick learn­ing from mak­ing this: it would be real­ly use­ful to have CSS Mix­ins when using a lot of repet­i­tive keyframes, as I do in this ani­ma­tion. The W3C seem to be quite against them, however.


Firefox supports CSS Transitions

Sup¬≠port for the CSS Tran¬≠si¬≠tions mod¬≠ule, orig¬≠i¬≠nal¬≠ly pro¬≠posed and imple¬≠ment¬≠ed by the WebKit team, has just land¬≠ed in the night¬≠ly builds of Fire¬≠fox; it‚Äôs unsure whether this will make it into 3.6, as this is due to be released in the near future, but should be a fea¬≠ture in 3.7 at least.

The exper¬≠i¬≠men¬≠tal fea¬≠ture will use the pro¬≠pri¬≠etary ‚ÄĎmoz- pre¬≠fix; I‚Äôve updat¬≠ed the demos in my pre¬≠vi¬≠ous post, Ani¬≠me with CSS and WebKit, to reflect this.

After per­form­ing some brief tests there seem to be a few prob­lems with the imple­men­ta­tion; it’s not as smooth as it could be, and the third demo does­n’t work as it should. Update: Found an issue with the brows­er not recog­nis­ing a val­ue with­out a unit (e.g. 0 instead of 0%); fixed the demo, and filed a bug.


Anime with CSS and Webkit

Recent¬≠ly I‚Äôve been think¬≠ing about Webkit‚Äôs CSS Ani¬≠ma¬≠tion mod¬≠ule, and play¬≠ing The World Ends With You on the Nin¬≠ten¬≠do DS. TWEWY is a JRPG with lots of sim¬≠ple Ani¬≠me-style cutscenes, and it occurred to me that they must be quite easy to recre¬≠ate using CSS Ani¬≠ma¬≠tion; so, I have.

Read the full article


Aside

I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.