Done! But there aren’t any “export settings” on the web. Video graphics are designed within a specific ratio and then exported out. But even with that background, I still found animating on the web pretty baffling.
Before I career jumped into development, I did a bunch of motion graphics work in After Effects. To keep an element sized based on the width of the container, we can use the following approach. There are three main ways we can keep our responsive animation proportional while scaling it. Most the time it requires a pairing of responsive units with an approach from below to keep the animation proportional. I tend to use solely responsive units as a scalar for animations when it’s a really simple animation, such as this illusion. 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. Adding this new rule can also affect other style changes.Īlternatively, we can use viewport units, which sizes the container based on the viewport regardless of how deeply it is nested. We could use percents to size our containers based on the viewport, but that often requires setting something like html, body and making sure that the parent is sized with respect to the body, which may not always be the case with nesting. Sizing containers based on the viewportįrom 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. This allows us to make sure that each piece of our responsive animation retains the behavior we want with respect to each other. 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.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.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. Scaling with responsive units Size pieces based on the parent Now, let’s look at the three most important ways that we can scale animations: scaling with responsive units, proportional scaling, and adaptive scaling. 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. Know the environments in which it will be used
Sizing animations relative to the parent elements helps prevent that from happening, as does the following point: 2.
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. 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. Even so, it might be wise to size each piece based on a container in case we change our minds later. The only exception is if we know that in every circumstance the element is going to be positioned and sized relative to the viewport. In responsive scaling this is simple enough, but in adaptive scaling we have to look to element (container) queries. Whether we’re using responsive or adaptive scaling (see below), we should try to size animations based on the container’s sizing.
#After effects responsive resize how to
In this post, we’ll cover how to help keep our responsive animations sized the way we want them.īefore we get into specific techniques, there are a couple basic guidelines we want to keep in mind: Guidelines for scaling responsive animations 1. 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. Scaling our websites and applications so that they look great on every screen can be difficult.
0 kommentar(er)
