Animations Articles
-
Creating a Multiplayer Game with TogetherJS and CreateJS
Bubble Hell Duel is a multiplayer HTML5 dogfighting game. The object of the game is to dodge bubbles launched from your opponent while returning fire. This game was written mainly as a prototype for learning and the source code is available on GitHub. You can try the game out in single or multiplayer here. Currently […]
-
Firefox OS, Animations & the Dark Cubic-Bezier of the Soul
I’ve been using Firefox OS daily for a couple of years now (wow, time flies!). While performance has steadily improved with efforts like Project Silk, I’ve often noticed delays in the user interface. I assumed the delays were because the hardware was well below the “flagship” hardware I’ve become accustomed to with Android and iOS devices. Last […]
-
Animating with javascript: from setInterval to requestAnimationFrame
Animating DOM elements[1] or the content of a canvas is a classical use case for setInterval. But the interval is not as reliable as it seems, and a more suitable API is now available… Animating with setInterval To animate an element moving 400 pixels on the right with javascript, the basic thing to do is […]
-
Animating like you just don’t care with Element.animate
In Firefox 48 we’re shipping the <a href="https://developer.mozilla.org/docs/Web/API/Element/animate" target="_blank"><b>Element.animate()</b></a> API — a new way to programmatically animate DOM elements using JavaScript. Let’s pause for a second — “big deal”, you might say, or “what’s all the fuss about?” After all, there are already plenty of animation libraries to choose from. In this post I want […]
-
Introducing the Canvas Debugger in Firefox Developer Tools
The Canvas Debugger is a new tool we’ll be demoing at the Game Developers Conference in San Francisco. It’s a tool for debugging animation frames rendered on a Canvas element. Whether you’re creating a visualization, animation or debugging a game, this tool will help you understand and optimize your animation loop. It will let you […]
-
The making of a hack – Media Query Mario
Like any developer, I love any shiny new tech demo that finds its way into my browser; some of the things people are putting together absolutely blows my mind with the level of creativity and technical skill on show. After attending WebDevConf 2012 in mid October, I felt the usual heightened sense of inspiration that […]
-
Calculated drop shadows in HTML5 canvas
One of the best new features of HTML5 when it comes to visual effects is the canvas element and its API. On the surface, it doesn’t look like much – just a rectangle in the page you can paint on and wipe. Much like an etch-a-sketch. However, the ability to transform, rotate and scale its […]
-
Life After Flash: Multimedia for the Open Web
Part II: Flash delivered video, animation, interactive sites and, yes, ads to billions of users for more than a decade, but now it’s going away. Here's a compilation of resources that looks ahead at the open web technologies that have emerged to make web video, animation, and game development more performant and engaging than ever!
-
Rendering 3D with CSS and JavaScript with dom3d (guest post)
Today we have a guest post by James Long (@jlongster). James is the tech lead for mozilla.com on the Web Development team. James is passionate about interactive graphics on the open web. Today he explains how you can create 3D objects using CSS without having 3D transforms support. Take it away, James. Recently I was […]
-
Treat Open Source Like a Startup
What am I getting myself into? I was never an open source contributor. I had never even filed a GitHub issue. I considered myself an entrepreneur who simply happened to be technical. But when the startup I wanted to build needed something that didn’t exist, I followed an unprecedented whim and paused everything I was working […]