gordonbrander + animation 67
Paperfold CSS | Demo Studio | Mozilla Developer Network
18 days ago by gordonbrander
A really impressive CSS demo for a "folding paper" show/hide effect.
design
development
web
css
inspiration
animation
ux
18 days ago by gordonbrander
Chrome DevTools Timeline's new Frame Mode - YouTube
21 days ago by gordonbrander
Chrome has an animation debugging tool. Paul Irish presents.
film
web
development
animation
chrome
21 days ago by gordonbrander
Animate.css - a bunch of plug-and-play CSS animations
5 weeks ago by gordonbrander
This is great: a library of classy CSS animations. The logic for animations like this is mostly handled by CSS's tweening, but getting an animation to feel right takes a lot of time.
animation
css
development
web
design
opensource
5 weeks ago by gordonbrander
Thinking with Joins
5 weeks ago by gordonbrander
So D3 prioritizes manipulating the elements -- the enter and exit methods correspond to views, not data. This seems right to me. Data is just data -- when it changes, the code should react to that.
javascript
visualization
data
functional
svg
categorytheory
animation
5 weeks ago by gordonbrander
CreateJS | A suite of Javascript libraries and tools designed for working with HTML5
5 weeks ago by gordonbrander
These look like some effective animation tools.
javascript
library
animation
canvas
opensource
5 weeks ago by gordonbrander
CSS Scroll Effects
6 weeks ago by gordonbrander
These are really quite clever.
css
animation
ux
design
development
web
6 weeks ago by gordonbrander
The New Edition For Electric Computers on Vimeo
6 weeks ago by gordonbrander
New Superbrothers video.
film
animation
game
design
6 weeks ago by gordonbrander
[whatwg] Canvas v5 API additions
8 weeks ago by gordonbrander
Canvas Path primitives have been added to the API. In other words, you can now construct `new Path()` objects and paint to them within a canvas context, giving us optional basic OOP/DOM drawing for canvas.
canvas
javascript
oop
animation
8 weeks ago by gordonbrander
Flux Slider » Hardware accelerated image transitions using CSS3
8 weeks ago by gordonbrander
Crazy CSS3 image transitions. Very impressive. To deconstruct.
css
development
javascript
animation
learn
opensource
8 weeks ago by gordonbrander
Nausicaä of the Valley of the Wind (film) - Wikipedia, the free encyclopedia
animation
film
8 weeks ago by gordonbrander
Nausicaä of the Valley of the Wind (風の谷のナウシカ Kaze no Tani no Naushika?) is a 1984 Japanese animated post-apocalyptic fantasy adventure film written and directed by Hayao Miyazaki
8 weeks ago by gordonbrander
YUI Theater — Stephen Woods: “Creating Responsive HTML5 Touch Interfaces” (24 min.) » Yahoo! User Interface Blog (YUIBlog)
javascript
learn
mvc
css
animation
film
february 2012 by gordonbrander
At the February 6, 2012 BayJax event at Yahoo!, Flickr Frontend Engineer Stephen Woods (@ysaw) shared his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. He also revealed how Star Trek: The Next Generation predicted the need for instant user feedback in a touch-based UI.
february 2012 by gordonbrander
Of Spreads and Slices | vvvv
february 2012 by gordonbrander
The visual prototyping language VVVV abstracts away the notion of arrays -- it's all just sets (or "spreads"), and sometimes a set may be composed of one. jQuery also suggests this is a developer-friendly approach.
development
design
pattern
learn
animation
february 2012 by gordonbrander
Storyboarding iPad Transitions - Boxes and Arrows: The design behind the design
february 2012 by gordonbrander
An article on prototyping UI interactions.
animation
prototype
wireframe
ios
design
february 2012 by gordonbrander
Does this easing make me look jerky? - Val Head is totally into design, type & code.
css
design
development
web
animation
december 2011 by gordonbrander
If you look at Chris' example below, it's pretty clear that the "ease" transition looks very jerky and just doesn't work well on the shorter width transition...
Luckily for us. other easing keywords, even one that is rather similar to "ease" like "ease-in-out", don't suffer from the jerkiness in similar situations.
december 2011 by gordonbrander
Sinuous - An HTML5 canvas game. Avoid the red dots!
november 2011 by gordonbrander
A simple and fun particle system game in HTML5.
html
canvas
javascript
animation
game
inspiration
physics
november 2011 by gordonbrander
Animatable: One property, two values, endless possiblities
november 2011 by gordonbrander
Lea Verou exploring possibilities with CSS animation.
animation
css
web
design
development
learn
november 2011 by gordonbrander
d3.js
It looks powerful, intuitive and easy-to-learn.
Presents all kinds of interesting possibilities, such as exposing the values in a crawl-able fashion.
data
visualization
javascript
svg
opensource
animation
bdw2011
november 2011 by gordonbrander
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.A truly impressive vehicle for data visualization. Uses SVG and DOM elements. Animation and transformation happens by applying properties to elements.
It looks powerful, intuitive and easy-to-learn.
Presents all kinds of interesting possibilities, such as exposing the values in a crawl-able fashion.
november 2011 by gordonbrander
7 Days of Source Day #2: NYTimes 365/360 | blprnt.blg
november 2011 by gordonbrander
This one is just plain pretty.
processing
data
visualization
animation
toxiclibs
opensource
learn
bdw2011
november 2011 by gordonbrander
7 Days of Source Day #6: NYTimes GraphMaker | blprnt.blg
november 2011 by gordonbrander
Another great data-vis example from Blprnt, with open source.
processing
data
visualization
toxiclibs
animation
bdw2011
opensource
learn
november 2011 by gordonbrander
7 Days of Source Day #4 – BC Budget Visualization Tool | blprnt.blg
november 2011 by gordonbrander
Use as example for data vis?
processing
data
visualization
animation
toxiclibs
code
bdw2011
opensource
learn
november 2011 by gordonbrander
Ceaser - CSS Easing Animation Tool - Matthew Lein
november 2011 by gordonbrander
An interface for generating CSS3 Animation easing equations. It includes all of the classic Penner equations (EaseOutQuart, EaseOutQuint, EaseOutSine, etc).
animation
css
tool
web
design
development
november 2011 by gordonbrander
A Modest Proposal for CSS3 Animations - Snook.ca
october 2011 by gordonbrander
A clever trick for CSS animating opacity from display:block.
css
animation
learn
web
development
october 2011 by gordonbrander
An explanation of the CSS animation on Apple's iPhone 4S webpage -- John B. Hall
october 2011 by gordonbrander
A nice dissection of a clever CSS3 animation.
animation
css
web
development
learn
inspiration
design
october 2011 by gordonbrander
HTML 5 Canvas Deep Dive
october 2011 by gordonbrander
Canvas API tutorial.
api
canvas
learn
documentation
animation
javascript
bdw2011
october 2011 by gordonbrander
Facebook: HTML5 for Developers
october 2011 by gordonbrander
An excellent set of resources and documentation for developing applications in HTML5
bdw2011
html
documentation
learn
javascript
game
animation
october 2011 by gordonbrander
cubic-bezier.com
october 2011 by gordonbrander
Lea Verou makes a tool for creating custom beziers for CSS3 animations.
css
animation
tool
october 2011 by gordonbrander
Processing.js v1.3.5 released « Processing.js Blog
october 2011 by gordonbrander
Processing.JS now distributes an API-only version -- the Javascript Processing object, without the Java-to-JS parser.
javascript
animation
opensource
bdw2011
october 2011 by gordonbrander
cwebgl - WebGL stack in javascript - Google Project Hosting
september 2011 by gordonbrander
WebGL emulation in the Canvas 2d context (for less gifted browsers). Incredible.
webgl
canvas
javascript
3d
animation
opensource
september 2011 by gordonbrander
Deck JS » Modern HTML Presentations
august 2011 by gordonbrander
A pretty solid JS framework for making presentations.
javascript
html
speaking
animation
framework
opensource
august 2011 by gordonbrander
Nest
august 2011 by gordonbrander
Nest provides a high-level, simple scenegraph for Processing, loosely following the API for the scenegraph and display list implemented by ActionScript 3.
processing
opensource
library
animation
august 2011 by gordonbrander
CSS transitions & media queries » Blog » Elliot Jay Stocks
july 2011 by gordonbrander
A clever idea: set css transitions on the body element when using media queries. All transitions are then animated.
css
mobile
animation
july 2011 by gordonbrander
Toxiclibs.js - Open-Source Library for Computational Design
july 2011 by gordonbrander
The ToxicLibs library from Processing ported to Javascript. Utils for forces, flocking, particles, etc.
javascript
processing
visualization
animation
canvas
opensource
bdw2011
july 2011 by gordonbrander
jRumble | A jQuery Plugin That Rumbles Elements
july 2011 by gordonbrander
A handy little script that buzzes or vibrates elements. Configurable. It would make a great way to say "error" politely.
jquery
animation
ui
javascript
opensource
plugin
july 2011 by gordonbrander
Computable Document Format for Interactive Content
july 2011 by gordonbrander
Wolfram launches a document format and player for the Mathematica language. A bit like a domain-specific Flash player. I like this idea, but I wonder how open the data will be.
interactive
animation
math
science
language
july 2011 by gordonbrander
New Zealand 100% Pure | Official Travel information from Tourism New Zealand
july 2011 by gordonbrander
Interesting use of scrolling-as-animation-cue.
animation
html
css
web
design
inspiration
javascript
july 2011 by gordonbrander
Cross Browser CSS Transforms – even in IE
june 2011 by gordonbrander
A css transforms polyfill that gets 3d transforms working in Internet Explorer -- event v6!
css
javascript
transforms
animation
3d
ie
polyfill
june 2011 by gordonbrander
Paper.js
june 2011 by gordonbrander
"The Swiss Army Knife of Vector Graphics Scripting". Compatible with Scriptographer (Adobe scripting environment). It's a bit like Processing. Notable differences are:
- Not state-based, or pixel-based. Rather, vector-based.
- Includes a DOM.
- Has an intuitive layer system, ala Photoshop.
- Javascript!
- Everything is sandboxed using closures (more on that below).
One cool and interesting feature is that event functions are global and called implicitly (e.g. just define function onFrame (){}). However, these calls are only global within the scope of the PaperScript, so everything is sandboxed. I anticipate this would be easier for beginners than an event subscribe model.
animation
html
canvas
javascript
vector
opensource
library
- Not state-based, or pixel-based. Rather, vector-based.
- Includes a DOM.
- Has an intuitive layer system, ala Photoshop.
- Javascript!
- Everything is sandboxed using closures (more on that below).
One cool and interesting feature is that event functions are global and called implicitly (e.g. just define function onFrame (){}). However, these calls are only global within the scope of the PaperScript, so everything is sandboxed. I anticipate this would be easier for beginners than an event subscribe model.
june 2011 by gordonbrander
Intro to CSS 3D transforms
june 2011 by gordonbrander
A mini-book by David Desandro overviewing CSS3 3d transforms.
3d
css
animation
learn
book
june 2011 by gordonbrander
GFX
june 2011 by gordonbrander
A jQuery plugin that gives you an API for CSS 3d transforms, plus some logic for cool transforms like cube roll. Great for iOS projects.
3d
animation
css
jquery
ios
plugin
opensource
javascript
june 2011 by gordonbrander
HTML5 Rocks - Getting Started with Three.js
june 2011 by gordonbrander
An intro tutorial to three.js.
webgl
canvas
3d
animation
library
learn
javascript
june 2011 by gordonbrander
Hype
may 2011 by gordonbrander
Indie keyframe-based animation software that outputs HTML5 markup (mostly divs and CSS3). Icon artwork by Susan Kare.
html
javascript
css
osx
app
animation
may 2011 by gordonbrander
mrdoob/three.js - GitHub
may 2011 by gordonbrander
Javascript/Canvas 3d engine with WebGL (by the talented @mrdoob).
3d
canvas
animation
webgl
javascript
opensource
may 2011 by gordonbrander
WebGL Inspector
may 2011 by gordonbrander
A "Firebug" for WebGL 3d code.
3d
animation
javascript
canvas
tool
opensource
may 2011 by gordonbrander
Marcin Ignac : Timeline.js
may 2011 by gordonbrander
A basic Javascript animation library with a Flash-like GUI for editing animations.
javascript
animation
opensource
library
may 2011 by gordonbrander
ded/emile - GitHub
april 2011 by gordonbrander
A platform agnostic CSS animation plugin. It's basically an API to CSS animation that includes easing, and will use CSS3 animation when available.
css
javascript
animation
opensource
plugin
april 2011 by gordonbrander
Madmanimation
april 2011 by gordonbrander
Andy Clarke puts together a Mad Men intro using HTML and CSS3.
animation
css
april 2011 by gordonbrander
Processing.js Flocking
february 2011 by gordonbrander
Flocking in processing. This + snow shimmer could make a great motion piece.
processing
javascript
animation
february 2011 by gordonbrander
Amazon.com: Timing for Animation (9780240517148): Harold Whitaker, John Halas OBE: Books
february 2011 by gordonbrander
A bible for animation. Used by Pixar Chief Officer in his early days. What are the meaningful frames in an animation?
animation
design
art
february 2011 by gordonbrander
benbarnett/jQuery-Animate-Enhanced - GitHub
january 2011 by gordonbrander
Drop-in script that replaces jQuery animations with CSS3 transitions when supported and possible.
animation
jquery
design
development
opensource
plugin
javascript
january 2011 by gordonbrander
Type in Motion
july 2010 by gordonbrander
A lovely and entertaining kinetic typography intro to... typography.
typography
animation
learn
teaching
film
july 2010 by gordonbrander
JQuery Cycle Plugin
july 2010 by gordonbrander
Pretty reliable carousel-type plugin with support for navigation and some wild transition animations.
jquery
plugin
javascript
development
animation
july 2010 by gordonbrander
Smokescreen
june 2010 by gordonbrander
Converts Flash movies to HTML5/Canvas/Javascript. Supports a good chunk of Flash8 animation, streaming sound and actionscript.
flash
api
development
canvas
animation
html
javascript
opensource
june 2010 by gordonbrander
Hedgehog in the Fog on Youtube
march 2010 by gordonbrander
A classic Russian animated short. Gorgeous.
animation
design
film
march 2010 by gordonbrander
Elna Frederick
february 2010 by gordonbrander
Crazy pre-canvas interactive pixel art (no Flash).
html
animation
web
art
february 2010 by gordonbrander
CSS3 Gallery Example
december 2009 by gordonbrander
Transitions, rotation and general flash-like classiness using CSS3 transitions.
css
javascript
animation
photo
december 2009 by gordonbrander
Processing.js
august 2009 by gordonbrander
A javascript port of the Processing animation language. Renders in <canvas>. Nice!
bdw2011
javascript
animation
interactive
library
august 2009 by gordonbrander
Surfin’ Safari: 3D Transforms
july 2009 by gordonbrander
Webkit again amazes with 3d animation via -webkit properties.
css
design
web
development
webkit
animation
3d
july 2009 by gordonbrander
Surfin’ Safari: CSS Animation
july 2009 by gordonbrander
Animation via -webkit css properties.
css
design
web
development
webkit
animation
july 2009 by gordonbrander
related tags
3d ⊕ animation ⊖ api ⊕ app ⊕ art ⊕ bdw2011 ⊕ book ⊕ bug ⊕ canvas ⊕ categorytheory ⊕ chrome ⊕ code ⊕ css ⊕ data ⊕ design ⊕ development ⊕ documentation ⊕ film ⊕ flash ⊕ framework ⊕ functional ⊕ game ⊕ html ⊕ ie ⊕ illustration ⊕ inspiration ⊕ interactive ⊕ ios ⊕ javascript ⊕ jquery ⊕ language ⊕ learn ⊕ library ⊕ math ⊕ mobile ⊕ mvc ⊕ oop ⊕ opensource ⊕ osx ⊕ pattern ⊕ photo ⊕ physics ⊕ plugin ⊕ polyfill ⊕ processing ⊕ prototype ⊕ science ⊕ shaders ⊕ speaking ⊕ svg ⊕ teaching ⊕ tool ⊕ toxiclibs ⊕ transforms ⊕ typography ⊕ ui ⊕ ux ⊕ vector ⊕ visualization ⊕ web ⊕ webgl ⊕ webkit ⊕ wireframe ⊕Copy this bookmark: