Compare scroll-driven animations with JavaScript

Introduction

CSS scroll-driven animations move work off the main thread, but browser support and fallbacks decide the trade-off. We benchmark both versions and show a hybrid pattern you can ship today.

Field notes

A few patterns we kept seeing while puttering around CSS problems:

• The simple version survived every refactor; the clever version didn’t.
• Documentation written during the work aged far better than documentation written after.
• The second time a problem shows up, it is already a pattern — name it.

A checklist you can steal

• The failure is reproducible with one command.
• The fix has a test that fails without it.
• Someone other than the author has run it on their machine.

Closing

Write the short version future-you will actually read. That is the whole trick.