Scaling Animation for All Devices

In this day and age, there’s no point in designing and developing a website or application for only one device, or in other words, not responsive. Not only does this limit your reach, but it also stops interested users and potential customers from using your website and learning more about the message you want to convey and the product or service you offer.


However, responsive web design is one thing, and responsive scalable animation is another. Web animation is a complex element that can be quite daunting to adjust and ensure consistency. There are many factors to consider, including bandwidth and code compatibility, when scaling animation to be responsive to different devices.



Sarah Drasner of CSS-Tricks suggests the use of SVG (Scalable Vector Graphics) for a truly responsive scalable animation. SVG is resolution-independent and doesn’t need a lot of HTTP requests. With SVG, coding is only done once, to be followed by adjustments in the visual complexity of the image, which, in fact, simple and intuitive to do.


Do take note, though, that even with SVG that is built to scale, animation’s appearance will still vary depending on screen size; but working with responsive scalable animation that uses SVG is somewhat easier. Below are some techniques:


Standalone Animation

An example of a standalone animation is when illustrating text. Create a responsive sprite and adjust the size and the complexity of the graphic. Then, get rid of repetition by altering properties or replace the properties with CSS media queries. With this technique, it might be necessary to adjust the animation to be less complex when adapting to smaller screen sizes. Also don’t forget about adjusting viewBox attributes, within the viewBox is where the SVG will be visible and anything that goes beyond it is cropped out.



When showing complex movements, Drasner further suggests using GreenSock Animation Platform (GSAP), which can be paired with SVG, instead of CSS. Animations with complex movement will benefit from GSAP’s cross-browser stability and better workable timeline.


GSAP offers a more stable movement without affecting speed unlike, for example, moving SVGs found in older Safari browsers on older Apple devices. Furthermore, GSAP enables stacking of tweens and staggered effects.


Transforms and Opacity and Scaling

When creating animation with complex movements, go with elements with transforms and opacity. These kinds of elements are more optimizable.


Use the attributes within SVG DOM. This way, when scaling, it adjusts along with the whole SVG within the viewBox. This is where the hassle-free one-time coding applies.


Responsive UX

Now, to make the animation responsive, the development and adjustment process will be smoother if each element is designed carefully and separately. Consider the units that need to be switch and stack. Then, make sure that all the parts are exported within individual SVGs and are named correctly. Don’t disregard unnecessary IDs or groups. This way, it will be easier to adjust.


Make it Simple for Mobile

As mentioned above, the animation should be made less complex when adapting to smaller screens, such as smartphones and tablets. This is not just because of the smaller viewing space, but also to reduce loading time. If the movement is not relevant to the user experience, then it’s better to leave it out.


Lastly, the most important thing you should remember when designing and developing is to plan everything carefully, from start to finish. Think about not only of the appearance, but also the experience. In our world where mobile dominates, responsive design is our greatest ally.


To help you with your web design and development needs, our designers and developers at MicroCreatives are ready to help you out. We focus on delivering an optimized website that suits your needs.


Reference: Creative Bloq. Sarah Drasner’s article originally appeared on Net Magazine.