Design for Developers

Animated Gradients

Design for Developers

Check out a free preview of the full Design for Developers course

The "Animated Gradients" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah shows an example of best practices with animating a gradient in your code.

Preview
Close

Transcript from the "Animated Gradients" Lesson

[00:00:00]
>> Sarah Drasner: If you need to animate gradients, don't just animate them. If you animate a gradient, it will actually like really cause a lot of performance issues because it's really expensive to do that. There's a lot of repaints when you animate a gradient. So I made this pen for you to check out and use, which is an animated transparent mask.

[00:00:21]
So what I do is I create two blocks of colors, create a mask of one of them, and move the color with transforms. So one of the things is moving with transforms, and then it's an animated gradient, but you're not causing any layout triggers. It's all really performing, transforms are a lot less expensive than some other types of things, like margin and lift.

[00:00:44]
And especially changing background colors, all cause repaints in your browser which makes them very expensive to run.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now