gordonbrander + animation   67

Paperfold CSS | Demo Studio | Mozilla Developer Network
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
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
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
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
[whatwg] Canvas v5 API additions
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
Nausicaä of the Valley of the Wind (film) - Wikipedia, the free encyclopedia
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
animation  film 
8 weeks ago by gordonbrander
YUI Theater — Stephen Woods: “Creating Responsive HTML5 Touch Interfaces” (24 min.) » Yahoo! User Interface Blog (YUIBlog)
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.
javascript  learn  mvc  css  animation  film 
february 2012 by gordonbrander
Of Spreads and Slices | vvvv
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
Does this easing make me look jerky? - Val Head is totally into design, type & code.
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.
css  design  development  web  animation 
december 2011 by gordonbrander
d3.js
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.
data  visualization  javascript  svg  opensource  animation  bdw2011 
november 2011 by gordonbrander
Ceaser - CSS Easing Animation Tool - Matthew Lein
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
A clever trick for CSS animating opacity from display:block.
css  animation  learn  web  development 
october 2011 by gordonbrander
Facebook: HTML5 for Developers
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
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
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
WebGL emulation in the Canvas 2d context (for less gifted browsers). Incredible.
webgl  canvas  javascript  3d  animation  opensource 
september 2011 by gordonbrander
Nest
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
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
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
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
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
Cross Browser CSS Transforms – even in IE
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
"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 
june 2011 by gordonbrander
Intro to CSS 3D transforms
A mini-book by David Desandro overviewing CSS3 3d transforms.
3d  css  animation  learn  book 
june 2011 by gordonbrander
GFX
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
Hype
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
Javascript/Canvas 3d engine with WebGL (by the talented @mrdoob).
3d  canvas  animation  webgl  javascript  opensource 
may 2011 by gordonbrander
Marcin Ignac : Timeline.js
A basic Javascript animation library with a Flash-like GUI for editing animations.
javascript  animation  opensource  library 
may 2011 by gordonbrander
ded/emile - GitHub
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
Andy Clarke puts together a Mad Men intro using HTML and CSS3.
animation  css 
april 2011 by gordonbrander
Processing.js Flocking
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
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
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
A lovely and entertaining kinetic typography intro to... typography.
typography  animation  learn  teaching  film 
july 2010 by gordonbrander
JQuery Cycle Plugin
Pretty reliable carousel-type plugin with support for navigation and some wild transition animations.
jquery  plugin  javascript  development  animation 
july 2010 by gordonbrander
Smokescreen
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
A classic Russian animated short. Gorgeous.
animation  design  film 
march 2010 by gordonbrander
Elna Frederick
Crazy pre-canvas interactive pixel art (no Flash).
html  animation  web  art 
february 2010 by gordonbrander
CSS3 Gallery Example
Transitions, rotation and general flash-like classiness using CSS3 transitions.
css  javascript  animation  photo 
december 2009 by gordonbrander
Processing.js
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
Webkit again amazes with 3d animation via -webkit properties.
css  design  web  development  webkit  animation  3d 
july 2009 by gordonbrander

Copy this bookmark:



description:


tags: