Tags: motion

29

sparkline

Monday, April 23rd, 2018

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.

Wednesday, March 7th, 2018

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!)

Thursday, March 1st, 2018

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:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. 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?

Tuesday, January 2nd, 2018

Dwitter

A social network for snippets of JavaScript effects in canvas, written in 140 characters or fewer. Impressive!

Friday, November 17th, 2017

Animista

What a great way to play around with CSS animations!

Monday, October 2nd, 2017

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.  

Monday, September 25th, 2017

Short Trip - Alexander Perrin

Well, this is simply delightful.

Sunday, August 13th, 2017

SVG can do THAT?! by sdrasner

119 slides from Sarah on a wide range of SVG magic (with code).

Wednesday, May 31st, 2017

Responsive Design for Motion | WebKit

A really great overview of using prefers-reduced-motion to tone down CSS animations.

This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!

Friday, May 12th, 2017

Nick Jones - Interface Prototyper / Designer

A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:

WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.

(Pssst: copy is also interface.)

Monday, May 1st, 2017

Electronic Items

I love the way Guillaume Kurkdjian uses animation here to demonstrate how these gadgets from the ’90s would work.

Sunday, February 12th, 2017

An Introduction to the Reduced Motion Media Query | CSS-Tricks

A new media query that will help prevent you making your users hurl.

Monday, July 25th, 2016

Animating

I’ve noticed a few nice examples of motion design on the web lately.

The Cloud Four gang recently redesigned their site, including a nice little animation on the home page.

Malcolm Gladwell has a new podcast called Revisionist History. The website for the podcast is quite lovely. Each episode is illustrated with an animated image. Lovely!

If you want to see some swishy animations triggered by navigation, the waaark websites has them a-plenty. Personally I find the scroll-triggered animations on internal pages too much to take (I have yet to find an example of scrolljacking that doesn’t infuriate me). But the homepage illustrations have some lovely subtle movement.

When it comes to subtlety in animation, my favourite example comes from Charlotte. She recently refactored the homepage of the website for the Leading Design conference. It originally featured one big background image. Switching over to SVG saved a lot of bandwidth. But what I really love is that the shapes in the background are now moving …ever so gently.

It’s like gazing at a slow-motion lava lamp of geometry.

Thursday, July 30th, 2015

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Wednesday, June 24th, 2015

100 words 094

On the way into work this morning I listened to the first episode of Motion and Meaning—a new short-run podcast all about animation, hosted by Cennydd and Val.

When I got to work, I had a sneak peak of a site that Graham has been working on. If everything goes according to plan, it will launch tomorrow. It’s a gorgeous piece of work with some very subtle bits of animation.

At the end of the day, I sat in on the weekly roundtable design crit. Richard finished it by soliciting ideas for animation effects on another upcoming site launch.

Tuesday, June 18th, 2013

The Internet of Actual Things on The Morning News

A vision of neurotic network-enabled objects, as prototyped by dConstruct speaker Simone Rebaudengo.

Monday, March 18th, 2013

Did we miss your tweet from earlier?

In case you missed it earlier…

Tuesday, August 14th, 2012

A List Apart: Articles: Everything in its Right Pace

A great article by Hannah, focusing on the Long Web—it isn’t about the quantity of data you’re publishing; it’s the quality. This builds nicely on the article I linked to recently about digital scarcity.

Sunday, July 1st, 2012

[this is aaronland] “an index of reality”

Aaron should definitely skyblog more often if this is the result.

Wednesday, June 20th, 2012

Sound of Summer

This is sooo nifty: Chloe’s obsessive Summer music visualisation is a lesson in responsive design and progressive enhancement. It’s also pretty fascinating.