Webmasters Gallery

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we’ll cover how to help keep our responsive animations sized the way we want them.

Before we get into specific techniques, there are a couple basic guidelines we want to keep in mind:

Guidelines for scaling responsive animations

1. Size the animations based on a container

Whether we’re using responsive or adaptive scaling (see below), we should try to size animations based on the container’s sizing. In responsive scaling this is simple enough, but in adaptive scaling we have to look to element (container) queries. The only exception is if we know that in every circumstance the element is going to be positioned and sized relative to the viewport. Even so, it might be wise to size each piece based on a container in case we change our minds later.

There have been times where I’ve finished polishing an animation exactly the way I want only to realize that it only works for that particular screen size. Those times have included making mistakes like using absolute units (like px), only viewing it in one screen size, using responsive units but failing to check extreme dimensions, and a couple other occasions where I had to go back and completely refactor my approach. Sizing animations relative to the parent elements helps prevent that from happening, as does the following point:

2. Know the environments in which it will be used

Will the animation be a module that is repeated across multiple parts of your application? Is it only going to be used for a page loader initially? Does it need to scale at all? Keeping this in mind can help determine the method in which an animation should be scaled and keep you from wasting effort.

---

Now, let’s look at the three most important ways that we can scale animations: scaling with responsive units, proportional scaling, and adaptive scaling.

Scaling with responsive units

Size pieces based on the parent

When we use responsive units like % or em, our animations automatically resize themselves based on the parent because their values change as their parent’s do.

• In the case of percentages, the child’s width value is set by the parent’s value for the property, multiplied by the percent value set on the child.
• In the case of ems, it looks at the parent’s font-size which determines the child’s size values, multiplied by the number of ems.

This allows us to make sure that each piece of our responsive animation retains the behavior we want with respect to each other.

Sizing containers based on the viewport

From there, if we size our containers relative to the viewport, our responsive pieces will then end up resizing themselves based on the viewport as well.

We could use percents to size our containers based on the viewport, but that often requires setting something like html, body { height: 100%; } and making sure that the parent is sized with respect to the body, which may not always be the case with nesting. Adding this new rule can also affect other style changes.

Alternatively, we can use viewport units, which sizes the container based on the viewport regardless of how deeply it is nested. One thing to keep in mind is that support for viewport units is not perfect, though it’s definitely in a state where it can be used for most projects.

I tend to use solely responsive units as a scalar for animations when it’s a really simple animation, such as this illusion. Most the time it requires a pairing of responsive units with an approach from below to keep the animation proportional.

Proportional scaling

There are three main ways we can keep our responsive animation proportional while scaling it.

1. Size based on the width

To keep an element sized based on the width of the container, we can use the following approach:

.container {
  height: 0;
  padding-top: 100%;
}

See the Pen Infinite Mountains CSS by Zach Saucier (@Zeaklous) on CodePen.

However, if you’re sizing your container based on the viewport, a more straightforward approach would be to use vw like so, though it doesn’t reach as far back regarding support.

2. Size based on the height

We can also size our container using the height by using vh as seen in this demo, but it is the least-used technique that I’ve seen. The only time I can recall doing something like this myself is when I used responsive units to create this loader, but even then I didn’t use a container or viewport units.

3. Size based on the larger dimension

Sizing based on the larger dimension is by far the most common way I size my responsive animations, especially my visualizations, because I almost always want all of my responsive animations to be seen entirely. This method ensures that that happens.

.container {
  max-width: 100vh;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.container::before {
  content: "";
  display: block;
  margin-top: 100%;
}

See the Pen Swirling dots by Zach Saucier (@Zeaklous) on CodePen.

This technique doesn’t make use of the vmax unit, so any browser that supports viewport units (back to IE9) can use it. However, it does make use of a pseudo element (unless you want to use a real element) which should be kept in mind.

If you are scaling the container on the viewport itself and can use viewport units, it’s very simple to size based on the larger dimension. All you need is:

.container {
  width: 100vmin;
  height: 100vmin;
}

This approach can be done only when the animation is sized with respect to the viewport, not some smaller container.

Adaptive scaling

Adaptive scaling is switching between variations at specific breakpoints. See Geoff Graham‘s CSS-Tricks article on the distinction between responsive and adaptive scaling.

At times we may want at least part of our responsive animations to change how they’re sized at a particular screen size. This is most commonly done when text or thin lines are used, though sometimes it’s also applicable when there are a lot of intricacies that would look busy when made smaller. Logos are probably the most commonly adapted elements because they need to be precise.

There’s no one way to make something adaptive, but I approach it in the same way I do responsive design: by scaling my animation until something starts to look ugly, then add a breakpoint to fix what looks ugly.

Sometimes it’s appropriate to mix responsive pieces with adaptive ones, such as in the Pen below. The top part is responsive but the text is adaptive to prevent text scaling from becoming ugly during in-between font sizes.

See the Pen Breakout by Zach Saucier (@Zeaklous) on CodePen.

A note on SVG

SVG can make use of any of the approaches outlined above. Most commonly, I treat SVG like a modular animation and make sure my SVG is sized by the SVG element itself, mostly treating it as a container based on the larger dimension, as covered above. This way it makes use of the vector nature of SVGs, allowing it to scale to be as large as it needs to be.

For more information on how to scale SVG specifically, check out Amelia Bellay-Royds‘ post on scaling SVG components here on CSS-Tricks or Sara Soueidan‘s Codrops post on making SVG responsive.

Make it look great in all contexts

With a bit of planning, animations can work just as well at small sizes as they do at large sizes. Don’t use pixel units, and make sure every width, height, and distance value are defined based on one or two variables based on the container/viewport dimensions or by font size.

---

Scaling Responsive Animations is a post from CSS-Tricks