Animations in web got their start back in 1987 when CompuServe (the first online service to offer internet connectivity) introduced the GIF. Flash was primarily used by companies to enhance their logos by rotating them 360 degrees, this gave the impression of a 3D object on the screen. After about 10 years, Flash was introduced which extended the ability to animate virtually anything on a web page. It quickly became the favorite tool for web games, enriched web applications, web animations and engaging experiences. However, Once mobile devices were born, Flash began to slowly die off. It was far too intensive to process on mobile CPUs, slowing down performance and drastically drained battery life. Apple was the first company to take a stand by not supporting Flash at all on any of their devices, which greatly improved on those performance issues. Eventually, Flash was deprecated in 2017 and officially discontinued on December 31, 2020.
Flash is gone, but a whole new arsenal has risen from the ashes.
CSS – Has become more and more powerful over the last several years. Todays CSS can do some pretty amazing things that could previously only been done by javascript. CSS is typically used for smaller-contained animations such as subtle movement, scaling an image on hover, or adding movement to a mobile menu sliding out from the side.
JS – An all around powerhouse, especially when it comes to advanced animations, js continues to grow and evolve with the times. JS is more ideal for total control of more complex effects like slowing down animations, pause/stop them triggered by a click or viewport position. It could even be something as complex as building out a game.
SVG – Scalable Vector Graphics are the top choice format for animations on the web. Since they are vector based, they can cleanly scale to any size, across any resolution. Thanks to their code based markup, the file is organized by paths and layers which can be targeted with precision. The cherry on top is that it’s also very lightweight in file size.
Canvas – This JavaScript drawing API is more comparable to SVG. While you would use SVG for flat graphics, you would use Canvas for something like an interactive game or scene with lots of moving elements and complex interactions. Canvas manipulates the very pixels of the graphic, rather than the path. Even though it requires more setup to get started and requires more work for handling interactions, Canvas really excels in performance and ability to control many moving parts.
GIF – Graphics Interchange Format, one of the earliest and popular forms of animation, used to be the center of the web realm. Nowadays they are inefficient, clunky and mostly used for memes or tiny icons. They are comparable to old school Disney animators drawing all those scenes painstakingly by hand, but now there are more sophisticated software tools to accomplish that task. GIFs do not have variable transparency and does not support the alpha channel, which means the pixels can only be opaque, transparent and color palette is limited to 256 colors.
Video – A slightly better option for animations than GIFs. Videos can be compressed more than GIFs and will save a lot of memory in a users bandwidth. They also support a wider range of colors and also audio sound. The drawbacks are the background can not be transparent, any motion edits have to be edited directly in the video file, and the more crisp quality will continually up the file size.
Principles of UX in Motion
There are 12 basic motion techniques can help visually enhance your animations, these are known as:
- Parallax
- Easing
- Parenting
- Offset & Delay
- Transformation
- Value Change
- Masking
- Overlay
- Cloning
- Obscuration
- Dimensionality
- Dolly & Zoom
Why animation is beneficial
Animations create a much less jarring experience when used correctly and efficiently. A smoother experience will keep the users engaged, interested and ultimately spend more time on a site, create conversions, and are more likely to share with others. A menu that appears from the side of the screen feels more connected seeing it slide out, rather than just instantaneously appearing. Buttons have a more tangible feel when they seamlessly transition from one color to the next on hover, and so on. Animations help tell a visual story and/or immerse the user in a memorable experience that will keep their attention longer and keep them coming back.
Pros
- Showcase unique features and give the site more personality
- Enhance Design
- Improve Engagement and Conversion
- Correct speed and timing will cause a site’s personality to spring to life
Cons
- Too much movement (or too fast/slow) can be distracting and off putting
- Can cause slow loading speeds
- Animation takes lots of time, which can increase heavily influence project budget
Some Animation Tools/Libraries
GSAP – GreenSock Animation Platform is an HTML5 javascript animation library to help craft high performance and robust animations. It boasts incredibly fast performance, is ripe with features and also highly compatible with old and new age web tools.
SVGator – An online animator tool that does not require any coding skills. The tool helps speed up the animating process and shape ideas into high-quality animations that work on any resolution. It exports a single animated SVG file with CSS or JavaScript.
Lottie Files – Another resource to give life to animations. While they are a bit more intensive to setup and create, they are versatile in working on any platform/device and despite their intensive movement, the JSON-based files are incredibly small in size.
After Effects – A tool used for digital visual effects, motion graphics and post production in film/tv. This software tool uses a timeline and keyframes to apply imported graphic layers to create animations. After effects plays a major role in the Lottie File setup process.
Flinto – More of a prototyping tool for apps, Flinto lets your create simple tap-through animations to give more insight to how an app will flow/function. It can also provide more comprehensive prototypes with complex interactions.
Breathing new life into our once static web pages is a huge win, but must also be used with control, finesse and purpose. Watching the growth of animations has been nothing short of exciting and will only get more engaging as it continues to evolve.
It’s a wild jungle out there, but Three29 is here to help you navigate it! Let’s go create an amazing experience together.
