#css animation | Explore Tumblr posts and blogs

jcmarchi · 1 month ago

Text

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

New Post has been published on https://thedigitalinsider.com/orbital-mechanics-or-how-i-optimized-a-css-keyframes-animation/

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

I recently updated my portfolio at johnrhea.com. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet.

Initially, I just plopped the animations into the new site, only changing the units (em units to viewport units using some complicated math that I was very, very proud of) so that they would scale properly because I’m… efficient with my time. However, on mobile, the planet would move up a few pixels and down a few pixels as the moons orbited around it. I suspected the plopped-in animation was the culprit (it wasn’t, but at least I got some optimized animation and an article out of the deal).

Here’s the original animation:

My initial animation for the moon ran for 60 seconds. I’m folding it inside a disclosure widget because, at 141 lines, it’s stupid long (and, as we’ll see, emphasis on the stupid). Here it is in all its “glory”:

Open code

#moon1 animation: moon-one 60s infinite; @keyframes moon-one 0% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 5% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 9.9% z-index: 2; 10% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 15% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 19.9% z-index: -1; 20% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 29.9% z-index: 2; 30% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 35% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 39.9% z-index: -1; 40% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 45% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 55% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 59.9% z-index: -1; 60% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 65% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 69.9% z-index: 2; 70% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 79.9% z-index: -1; 80% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 85% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 89.9% z-index: 2; 90% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 95% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1; 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in;

If you look at the keyframes in that code, you’ll notice that the 0% to 20% keyframes are exactly the same as 20% to 40% and so on up through 100%. Why I decided to repeat the keyframes five times infinitely instead of just repeating one set infinitely is a decision lost to antiquity, like six years ago in web time. We can also drop the duration to 12 seconds (one-fifth of sixty) if we were doing our due diligence.

I could thus delete everything from 20% on, instantly dropping the code down to 36 lines. And yes, I realize gains like this are unlikely to be possible on most sites, but this is the first step for optimizing things.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 5% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 9.9% z-index: 2; 10% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 15% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 19.9% z-index: -1; 20% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in;

Now that we’ve gotten rid of 80% of the overwhelming bits, we can see that there are five main keyframes and two additional ones that set the z-index close to the middle and end of the animation (these prevent the moon from dropping behind the planet or popping out from behind the planet too early). We can change these five points from 0%, 5%, 10%, 15%, and 20% to 0%, 25%, 50%, 75%, and 100% (and since the 0% and the former 20% are the same, we can remove that one, too). Also, since the 10% keyframe above is switching to 50%, the 9.9% keyframe can move to 49.9%, and the 19.9% keyframe can switch to 99.9%, giving us this:

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1;

Though I was very proud of myself for my math wrangling, numbers like -3.51217391vw are really, really unnecessary. If a screen was one thousand pixels wide, -3.51217391vw would be 35.1217391 pixels. No one ever needs to go down to the precision of a ten-millionth of a pixel. So, let’s round everything to the tenth place (and if it’s a 0, we’ll just drop it). We can also skip z-index in the 75% and 25% keyframes since it doesn’t change.

Here’s where that gets us in the code:

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; 25% transform: translate(-3.5vw, 3.5vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% transform: translate(-5vw, 6.5vw) scale(1); z-index: -1; animation-timing-function: ease-in; 75% transform: translate(1vw, 2.5vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; 99.9% z-index: -1;

After all our changes, the animation still looks pretty close to what it was before, only way less code:

One of the things I don’t like about this animation is that the moon kind of turns at its zenith when it crosses the planet. It would be much better if it traveled in a straight line from the upper right to the lower left. However, we also need it to get a little larger, as if the moon is coming closer to us in its orbit. Because both translation and scaling were done in the transform property, I can’t translate and scale the moon independently.

If we skip either one in the transform property, it resets the one we skipped, so I’m forced to guess where the mid-point should be so that I can set the scale I need. One way I’ve solved this in the past is to add a wrapping element, then apply scale to one element and translate to the other. However, now that we have individual scale and translate properties, a better way is to separate them from the transform property and use them as separate properties. Separating out the translation and scaling shouldn’t change anything, unless the original order they were declared on the transform property was different than the order of the singular properties.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; 25% translate: -3.5vw 3.5vw; z-index: 2; animation-timing-function: ease-out; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; 75% translate: 1vw 2.5vw; scale: 0.25; animation-timing-function: ease-out; 99.9% z-index: -1;

Now that we can separate the scale and translate properties and use them independently, we can drop the translate property in the 25% and 75% keyframes because we don’t want them placed precisely in that keyframe. We want the browser’s interpolation to take care of that for us so that it translates smoothly while scaling.

#moon1 animation: moon-one 12s infinite; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; 25% scale: 1.5; animation-timing-function: ease-out; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; 75% scale: 0.25; animation-timing-function: ease-out; 99.9% z-index: -1;

Lastly, those different timing functions don’t make a lot of sense anymore because we’ve got the browser working for us, and if we use an ease-in-out timing function on everything, then it should do exactly what we want.

#moon1 animation: moon-one 12s infinite ease-in-out; @keyframes moon-one 0%, 100% translate: 0 0; scale: 1; z-index: 2; 25% scale: 1.5; 49.9% z-index: 2; 50% translate: -5vw 6.5vw; scale: 1; z-index: -1; 75% scale: 0.25; 99.9% z-index: -1;

And there you go: 141 lines down to 28, and I think the animation looks even better than before. It will certainly be easier to maintain, that’s for sure.

But what do you think? Was there an optimization step I missed? Let me know in the comments.

0 notes

jcmarchi · 1 month ago

Text

Modern Scroll Shadows Using Scroll-Driven Animations

New Post has been published on https://thedigitalinsider.com/modern-scroll-shadows-using-scroll-driven-animations/

Modern Scroll Shadows Using Scroll-Driven Animations

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element.

Geoff covered a newer approach that uses the animation-timeline property. Using animation-timeline, we can tie CSS animation to the scroll position. His example uses pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements based on scroll.

Here’s yet another way. Instead of using shadows, let’s use a CSS mask to fade out the edges of the scrollable element. This is a slightly different visual metaphor that works great for horizontally scrollable elements — places where your scrollable element doesn’t have a distinct border of its own. This approach still uses animation-timeline, but we’ll use custom properties instead of pseudo-elements. Since we’re fading, the effect also works regardless of whether we’re on a dark or light background.

First, we’ll define our scrollable element with a mask that fades out the start and end of the container. For this example, let’s consider the infamous table that can’t be responsive and has to be horizontally scrollable on mobile.

Let’s add the mask. We can use the shorthand and find the mask as a linear gradient that fades out on either end. A mask lets the table fade into the background instead of overlaying a shadow, but you could use the same technique for shadows.

.scrollable mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);

Defining the custom properties and animation

Next, we need to define our custom properties and the animation. We’ll define two separate properties, --left-fade and --right-fade, using @property. Using @property is necessary here to specify the syntax of the properties so that browsers can animate the property’s values.

@property --left-fade syntax: "<length>"; inherits: false; initial-value: 0; @property --right-fade syntax: "<length>"; inherits: false; initial-value: 0; @keyframes scrollfade 0% --left-fade: 0; 10%, 100% --left-fade: 3rem; 0%, 90% --right-fade: 3rem; 100% --right-fade: 0;

Instead of using multiple animations or animation-range, we can define a single animation where --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we update our mask to use our custom properties and tie the scroll-timeline of our element to its own animation-timeline.

Putting it all together

Putting it all together, we have the effect we’re after:

We’re still waiting for some browsers (Safari) to support animation-timeline, but this gracefully degrades to simply not fading the element at all.

Wrapping up

I like this implementation because it combines two newer bits of CSS — animating custom properties and animation-timeline — to achieve a practical effect that’s more than just decoration. The technique can even be used with scroll-snap-based carousels or cards:

It works regardless of content or background and doesn’t require JavaScript. It exemplifies just how far CSS has come lately.

0 notes