Tagged “animation”
Web animation tips
Warning: this entry is a work-in-progress and incomplete. That said, it's still a useful reference to me which is why I've published it. I’ll flesh it out soon!
There are lots of different strands of web development. You try your best to be good at all of them, but there’s only so much time in the day! Animation is an area where I know a little but would love to know more, and from a practical perspective I’d certainly benefit from having some road-ready solutions to common challenges. As ever I want to favour web standards over libraries where possible, and take an approach that’s lean, accessible, progressively-enhanced and performance-optimised.
Here’s my attempt to break down web animation into bite-sized chunks for ocassional users like myself.
Motion One: The Web Animations API for everyone
A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Swipey image grids (on cassie.codes)
A lovely post by Cassie Evans in which she demonstrates that SVG is not just for icons and illustrations. You might also reach for it to create a responsive, animated grid of images.
we have another grid at our disposal. SVG has its own internal coordinate system and it's responsive by design.
Robb Owen - Independent Creative Developer
Definite “personal website goals” here in Robb’s beautiful online portfolio and blog.
From interaction design to scaleable design systems, single-page apps to something more experimental with WebGL. I help awesome people to build ambitious yet accessible web projects - the wilder, the better.
How to create an accordion hover effect with box-shadows (Sarah L. Fossheim)
In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover.
CSS Triggers
Check whether or not a CSS property is a good candidate for smooth animation based on whether updates to its value trigger expensive changes (to, for example, “element geometry”) causing layout updates and repaints.
4 Ways to Animate the Color of a Text Link on Hover | CSS-Tricks
Let’s create a pure CSS effect that changes the color of a text link on hover – but slide that new color in instead of simply swapping colors.
Animating the underlining of multi-line text
Cassie Evans shows us how to combine background–size, a linear-gradient based background-image and a keyframe animation (all in HTML and CSS) for a lovely progressive underline effect on multi-line text.
Intro to CSS 3D transforms
Excellent tutorials by David DeSandro. I’ve already used the card flip and it worked really well.
Fading out siblings on hover in CSS (by Trys Mudford)
Here’s a nice CSS-only hover technique from Trys Mudford incorporating scale transforms, opacity transitions and mouse pointer events.
Gifox 2 for Mac - Delightful GIF Recording and Sharing App
When watching presentations recently I’ve noticed that a few speakers use this tool to generate animated images for their slides.
Gifox is a menu bar app that records your screen into animated GIFs – a great compromise between static images and full-size videos.
TunnelBear – VPN Software for Bears
I was introduced to this smile-inducing website by Val Head’s An Event Apart Talk “Building more expressive projects”.
See all tags.