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.
A collection of collections.
This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.
There are some lovely animations in this year-long challenge.
The idea behind Daily CSS Design is to create one responsive design every day for a whole year. All shapes, patterns and colors are made by coding.
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.
Jonathan goes down the rabbit hole of trying to animate a
In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
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?
Take a break. Build a sandcastle. It’s relaxing.
What a great way to play around with CSS animations!
The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on
ID attributes referenced via
:target). Depending on your use-case, that may or may not be desirable.
I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Well, this is simply delightful.
Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!