Real Animation Using JavaScript, CSS3, and HTML5 Video
11 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
			
				 Dan
				Dan
			
		
		
	NP, Dan.
Video content for interaction and other forms of non-primary content will hit the web big tiiime.
			
				 Dustin Hansen
				Dustin Hansen
			
		
		
	By far the best article this year! Thanks for an article that exemplifies what I’ve come to expect from 24ways.
I’ve just begun to test animation with both jQuery and Mootools, and have noticed a very mechanical feel to it, but could never quite put my finger on why. This explains a lot, and I’ll definitely be picking up a book this week. ;-)
Thanks again, Dan!
			
				 Anthony Calzadilla
				Anthony Calzadilla
			
		
		
	Great article. There are a bunch of great tips that I’m definitely going to use in my next CSS3 animation. I’ve found that animating elements using different CSS positioning values results in choppy animation on mobile devices. The solution? The new CSS3 translate() property. I recently fixed a CSS3 animation by converting all the keyframes from positioning to translate(). Thanks again!
			
				 Matthew Farag
				Matthew Farag
			
		
		
	I’ve been saying this for years to my fellow designers, but thank you, Dan, for telling the world.
Animation doesn’t just have to be superfluous eye-candy; metaphor can help make computers seem more familiar and less intimidating to my grandmother.
Quick heads up, the video has a different color profile than the site graphics, making it possible to see the video:
http://cl.ly/3e3Q
			
				 Nicolas Chevallier
				Nicolas Chevallier
			
		
		
	Thanks for this introduction to CSS3 animation. I think that new tools will be released to support and create such animations, but when?
			
				 Mark
				Mark
			
		
		
	Very good article Dan. This is a good awareness of what you can do with CSS3. This article made me invest more time in jquery and CSS3. 
Lately I see more and more professional websites using this, so I guess it will be the future of webdesign.
			
				 Anurup Raveendran
				Anurup Raveendran
			
		
		
	Your article was immensely interesting. I’ve been working on Javascript for quite some time. I’m a huge gaming fan as well. I tried to develop a few games using C++ frameworks but they were too resource hungry. I thought I’ll start with lighter frameworks and work my way up.
By the way the link you posted for the demos is giving a 403 Forbidden error.
Cheers
			
				 Jamy
				Jamy
			
		
		
	Awesome article! I’m definitely going to try something like this out.
Note: The anchor link which links to http://24ways.org/Scalable takes me to a 404 page.
			
				 Ali Lane
				Ali Lane
			
		
		
	I haven’t read the whole article yet but I’ve looked through all the demo’s. Really smart. The video element is a cracking idea.
Needless to say, this has been bookmarked for future reference : )
 
                         Dan
				Dan
			 
				
			 Dustin Hansen
				Dustin Hansen
			 Anthony Calzadilla
				Anthony Calzadilla
			 Matthew Farag
				Matthew Farag
			 Nicolas Chevallier
				Nicolas Chevallier
			 Mark
				Mark
			 Anurup Raveendran
				Anurup Raveendran
			 Jamy
				Jamy
			 Ali Lane
				Ali Lane
			
Tor – Thanks for the heads up. For this proof of concept, I’m not terribly worried about color issues. For production use, you’ll certainly want to make sure the transition from static graphic to video back to static graphic is as seamless as possible.
Nicolas – Your guess is as good as mine, although I’d wager that there are some things in production that will soon be released.