Animations Articles
-
Baby’s First Rust+WebAssembly module: Say hi to JSConf EU!
A secret project has been brewing for JSConf EU, and this weekend is the big reveal: The Arch is a larger-than-life experience that uses 30,000 colored LEDs to create a canvas for light animations. And you can take charge of this space. Using modules, you can create a light animation. But even though this is JSConf, these animations aren’t just powered by JavaScript modules. In fact, we hope you will try something new… Rust + WebAssembly.
-
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!
-
Visualize animations easing in DevTools
The easing (or timing function) of an animation is what dictates the way it progresses through time. For example, a linear easing means that an animation runs at the same speed throughout its duration. This means that if an element isn’t moving at first and then starts to move, it will do so instantly, as […]
-
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 […]
-
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 […]
-
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 […]
-
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 […]
-
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 […]
