Making It Move in HTML5 Without Flash
Intended Audience: Web Developers
Estimated Reading Time: 8 minutes
In 2012, Flash was dying and HTML5 was the future. Apple had blocked Flash on iOS in 2010, Adobe had abandoned Flash for mobile, and by December 2012 the W3C designated HTML5 as a Candidate Recommendation. For anyone with graphics programming experience, this was the moment — the browser was finally a serious platform for animation.
I was working as a software engineer at Match.com, building the mobile web app. Match and Apple had famously gotten into a standoff over the "Apple tax," resulting in Match's brief ban from the App Store. That made our mobile web app strategically critical — not a fallback, but the primary mobile product during the dispute. HTML5 wasn't optional; it was the product.
For me personally, this was bigger than the job. I'd been interested in graphics algorithms for years, but the browser had never been a serious venue for that work. Canvas and CSS3 transforms changed everything. Skills that had been pent up finally had a home.
LaserParticles: Canvas Particle Systems
The first talk I developed was about particle animation in HTML5 Canvas. I built a demo called LaserParticles — a particle system that loaded pixels from an image and animated them individually.
The system had four animation phases:
- Emit — particles spawn from a point
- Showing — particles settle into their image positions
- Scatter — particles disperse randomly
- Hiding — particles fade out
The entire demo fit the visual appeal of Flash-era animation experiments, but ran in pure JavaScript on a 2D canvas. No plugins, no external dependencies — just the browser.
The talk walked through how particle systems work: the data structures, the update loop, the rendering. I presented it at local developer meetups, drawing on demos and concepts from the broader HTML5 community.
CSS Animation: Making It Move Without Flash
The second talk focused on CSS3 animation and transforms. The title was "Making It (without Flash) — Animations in the Browser."
The narrative arc:
- Flash was awesome — on almost every desktop, great capabilities, large community
- Mobile killed it — Flash wasn't optimized for mobile, Apple refused to support it, Adobe called off the Flash Mobile project
- W3C standards won — browser vendors chose to support CSS3 and HTML5
The technical content covered:
- DOM elements as the foundation of CSS (and still the foundation in CSS3)
- How transforms take elements out of document flow — other elements ignore the change
- Browser prefixes and the state of cross-browser support in 2013
- Practical animation techniques with
transitionand@keyframes
I drew on published work from the HTML5 community — books, blog posts, open source demos — and assembled it into a presentation that made the concepts accessible.
The Stir Prototype
After giving the particle talk externally, I tried to bring the work into production. Match.com had a live events product called Stir, and I built a prototype using particle effects for user profiles. It looked impressive, but it didn't fit what the app actually needed. The prototype stayed internal, and the particle work remained a side exploration rather than shipped code.
That's often how these things go — the conference talk and the production codebase serve different purposes.
The Broader Moment
By August 2013, 153 Fortune 500 companies had implemented HTML5 on their corporate websites. The transition was real, and happening fast.
These talks came out of that moment — a software engineer at a major consumer web company, exploring what the browser could finally do, and sharing it with the local developer community. The sophistication of the work reflected the opportunity: for the first time, serious graphics programming had a home in the browser, and everyone was figuring it out together.