A Directory of design and front-end resources
A collection of collections.
This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.
Tags: animation
91
Daily CSS Design
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.
page-transitions-travelapp
A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.
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.
Animating Progress - Snook.ca
Jonathan goes down the rabbit hole of trying to animate a progress element.
Starability - Accessible rating system demo
Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.
setInterval(_=>{ document.body.innerHTML = [ …”😮😀😁😐😑😬” ][~~(Math.random()*6)] },95)
A tiny snippet of JavaScript for making an animation of a talking emoji face.
Animated SVG Radial Progress Bars - daverupert.com
Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript.
In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
Parallax scrolling with CSS variables | basicScroll
Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)
Your Interactive Makes Me Sick - Features - Source: An OpenNews project
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?
Dwitter
A social network for snippets of JavaScript effects in canvas, written in 140 characters or fewer. Impressive!
Sandcastles
Take a break. Build a sandcastle. It’s relaxing.
Animista
What a great way to play around with CSS animations!
Building a CSS-only image gallery (with fallbacks)
A great step-by-step walkthrough of building a really nice image gallery without any JavaScript.
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.
CSS and SVG animation workshop by codebarbrighton
There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.
jakearchibald/navigation-transitions
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.
Short Trip - Alexander Perrin
Well, this is simply delightful.
Integrating Animation into a Design System · An A List Apart Article
Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!
SVG can do THAT?! by sdrasner
119 slides from Sarah on a wide range of SVG magic (with code).
Hertzsprung-Russell diagram animation | ESA/Hubble
When I was in Düsseldorf for this year’s excellent Beyond Tellerrand conference, I had the pleasure of meeting Nadieh Bremer, data visualisation designer extraordinaire. I asked her a question which is probably the equivalent of asking a chef what their favourite food is: “what’s your favourite piece of data visualisation?”
There are plenty of popular answers to this question—the Minard map, Jon Snow’s cholera map—but we had just been chatting about Nadieh’s previous life in astronomy, so one answer popped immediately to mind: the Hertzsprung-Russell diagram.