Adactio: Links—Tagged with animation

Static sites, slack and scrollytelling. | Clearleft

Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!

Cassie Evans’s Blog

Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)

Motion Paths - Past, Present and Future | Codrops

This is superbly in-depth and easy-to-follow article from Cassie—everything you need to know about motion paths in SVG and CSS! It’s worth reading just for the wonderful examples.

Web Layers Of Pace

How cool is this!!?

Tom took one of the core ideas from my talk at Beyond Tellerrand and turned it into this animated CodePen!

Interactive web animation with SVG by Cassie Evans | CSSCAMP 2019 - YouTube

Cassie’s excellent talk on SVG animation is well worth your time.

SVG Artista

A handy tool for tweaking the animations in your SVGs.

How Web Content Can Affect Power Usage | WebKit

The way you build web pages—using IntersectionObserver, for example—can have a direct effect on the climate emergency.

Webpages can be good citizens of battery life.

It’s important to measure the battery impact in Web Inspector and drive those costs down.

Creating my logo animation - cassie.codes

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!

Smashing TV — Webinars and Live Sessions — Smashing Magazine

Don’t miss this—a masterclass in SVG animation with Cassie (I refuse to use the W word). Mark your calendar: August 20th.

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

Impressively lightweight and smooth!

Reducing motion with the picture element

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 picture.

Earth day at Clearleft

Isn’t this just lovely?

Cassie made a visualisation of the power we’re getting from the solar panels we installed on the roof of the Clearleft building.

I highly recommend reading her blog post about the process too. She does such a great job of explaining how she made API calls, created SVGs, and calculated animations.

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: fixed would 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.

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 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.

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.

Link tags: animation

109