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

Articles Tagged
animation

120 Articles
{
,

}
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
Direct link to the article Exploring the CSS Paint API: Blob Animation
animation canvas css paint api houdini

Exploring the CSS Paint API: Blob Animation

After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But …

Avatar of Temani Afif
Temani Afif on Aug 30, 2021 (Updated on Oct 22, 2021)
Direct link to the article Stealing Game Animation Techniques to Engage Users
animation framer threejs

Stealing Game Animation Techniques to Engage Users

Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and …

Avatar of Eli Penner
Eli Penner on Aug 25, 2021
Direct link to the article Typewriter Animation That Handles Anything You Throw at It
animation JavaScript

Typewriter Animation That Handles Anything You Throw at It

I watched Kevin Powell’s video where he was able to recreate a nice typewriter-like animation using CSS. It’s neat and you should definitely check it out because there are bonafide CSS tricks in there. I’m sure you’ve seen other CSS …

Avatar of Murtuzaali Surti
Murtuzaali Surti on Jul 20, 2021
  • 1
  • 2
  • 3
  • ...
  • 11
  • 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
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
  • The Greatest CSS Tricks
Contact
  • Email
  • Guest Writing
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top