This is a really nice introduction to CSS transitions with interactive demos you can tinker with.
Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!
The latest edition in this wonderful series of science-fictional typography has some truly twisty turbolift tangents.
Cassie’s excellent talk on SVG animation is well worth your time.
A handy tool for tweaking the animations in your SVGs.
What a wonderfully in-depth and clear tutorial from Cassie on how she created the animation for her nifty SVG logo!
Also: Cassie is on the indie web now, writing on her own website—yay!
Impressively lightweight and smooth!
Here’s a clever tiny lesson from Dave and Brad: you can use
prefers-reduced-motion in the
media attribute of the
source element inside
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article
This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):
Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even
background-attachment: fixedwould make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.
Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.
Some lovely data visualisation by Brendan:
The work features three main components — the threats, represented by black obelisk style objects, the system which detects and deals with these threats, represented by an organic mesh like structure, and finally the creativity that is allowed to flow because the threats have been neutralised.
This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.
Wheeee! Another fun experiment from Cameron.
My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!
Some lovely little animation experiments from Cameron.
A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).
While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.
All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.
Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.
Guidelines to consider before adding swooshy parallax effects:
- Respect the Physics
- Remember that We Call Them “Readers”
- Ask for Consent
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?