Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
animation

123 Articles
{
,

}
Direct link to the article How I Chose an Animation Library for My Solitaire Game
animation GSAP strategy

How I Chose an Animation Library for My Solitaire Game

There is an abundance of both CSS and JavaScript libraries for animation libraries out there. So many, in fact, that choosing the right one for your project can seem impossible. That’s the situation I faced when I decided to build …

Avatar of Holger Sindbaek
Holger Sindbaek on Jun 29, 2022
Direct link to the article Single Element Loaders: The Spinner
animation gradients loader mask pseudo elements

Single Element Loaders: The Spinner

Making CSS-only loaders is one of my favorite tasks. It’s always satisfying to look at those infinite animations. And, of course, there are lots of techniques and approaches to make them — no need to look further than CodePen to …

Avatar of Temani Afif
Temani Afif on Jun 10, 2022 (Updated on Jul 1, 2022)
Direct link to the article A CSS Slinky in 3D? Challenge Accepted!
3d animation animation-delay

A CSS Slinky in 3D? Challenge Accepted!

Braydon Coyer recently launched a monthly CSS art challenge. He actually had reached out to me about donating a copy of my book Move Things with CSS to use as a prize for the winner of the challenge — …

Avatar of Jhey Tompkins
Jhey Tompkins on May 12, 2022
GSAP Flip plugin logo.
Direct link to the article GSAP Flip Plugin for Animation
animation flip GreenSock

GSAP Flip Plugin for Animation

Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post:

FLIP, coined by Paul Lewis, is an

…
Avatar of Chris Coyier
Chris Coyier on Feb 15, 2022
Direct link to the article Building a Scrollable and Draggable Timeline with GSAP
animation GreenSock slider

Building a Scrollable and Draggable Timeline with GSAP

Direct Link

Here’s a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It’s an interesting challenge to have two different interactions (vertical scrolling and horizontal dragging) be tied together …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 2, 2022
Direct link to the article Empathetic Animation
accessibility animation prefers-reduced-motion

Empathetic Animation

Animation on the web is often a contentious topic. I think, in part, it’s because bad animation is blindingly obvious, whereas well-executed animation fades seamlessly into the background. When handled well, animation can really elevate a website, whether it’s just …

Avatar of Cassie Evans
Cassie Evans on Dec 29, 2021 (Updated on Jan 18, 2022)
Direct link to the article Low framerate in Safari on M1 Mac
animation performance

Low framerate in Safari on M1 Mac

Direct Link

John James Jacoby:

I recently noticed that animations in Safari were stuttering pretty badly on my M1 powered 2020 MacBook Air, and dove in to figure out why.

The why:

This wasn’t a bug. This was a feature.

…
Avatar of Chris Coyier
Shared by Chris Coyier on Dec 3, 2021
Direct link to the article Recreating the Apple Music Hits Playlist Animation in CSS
animation animation-delay css animation keyframes

Recreating the Apple Music Hits Playlist Animation in CSS

Apple Music has this “Spatial Audio” feature where the direction of the music in your headphones is based on the location of the device. It’s tough to explain just how neat it is. But that’s not what I’m here to …

Avatar of Geoff Graham
Geoff Graham on Nov 29, 2021
Direct link to the article A Handy Little System for Animated Entrances in CSS
animation animation-delay css animation keyframes

A Handy Little System for Animated Entrances in CSS

I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but instead popped, slid, faded, or spun into place? It might be a …

Avatar of Neale Van Fleet
Neale Van Fleet on Nov 26, 2021 (Updated on Nov 29, 2021)
Direct link to the article Parallax Powered by CSS Custom Properties
animation custom properties GSAP

Parallax Powered by CSS Custom Properties

Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some …

Avatar of Jhey Tompkins
Jhey Tompkins on Nov 19, 2021
Direct link to the article Animation Techniques for Adding and Removing Items From a Stack
animation transition

Animation Techniques for Adding and Removing Items From a Stack

Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an …

Avatar of Luke Courtney
Luke Courtney on Oct 4, 2021
  • 1
  • 2
  • 3
  • ...
  • 12
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top