When animation meets interaction
When it comes to our time on the web, we may not notice all of the small pieces of animation and motion that create a more positive experience for us. It is the small details that make all of the difference and motion is a big part of that.
Motion graphics in user interface applications can have a lot of different applications. Whether it is simply creating interest, expanding information, or directing the viewers eye, animation has become a must in modern web design.
I wanted to crate a mock-animation for web purposes. One of the applications for motion in web that interests me is use of expandable areas to reveal more information. Specifically, the animation used to reveal the information is crucial.
The video above is what I created. I am overall happy with how it turned out. I took a mix of skills to get this done, including stop motion and After Effects animation. The result is the hiding then revealing of information in a simple and interesting way.
Readings
Animated Storytelling by Liz Blazer (Chapter 10)
In Chapter 10 of Animated Storytelling Liz Blazer discusses the planning it takes to create a masterfully animated story. The animation process itself can be chaotic, as individual elements don’t always cooperate when put into motion. To maintain control, animators should follow key strategies, beginning with a production calendar. By working backward from the final deadline and setting realistic milestones, they can ensure steady progress. Frequent backups, organized file naming, and robust storage solutions prevent catastrophic data loss.
Efficiency in animation requires ruthless editing, ensuring that every shot serves the story while eliminating unnecessary elements. Strategic movement and composition enhance storytelling—characters’ key poses should be carefully planned to align with the narrative, and anticipating or following through on movements creates natural motion. Directional movement choices influence the audience's emotional response, while subtle visual effects like blur or vignette add depth. Sound is another dynamic storytelling tool, requiring flexibility to adjust the soundtrack as the story evolves. Animators should choreograph scenes to their soundtrack while ensuring that the animation alone can carry the story without over-relying on audio. By balancing all these aspects, animators can create engaging, well-structured, and emotionally compelling animated stories.
Research
Apple Fitness+
This example from Apple Fitness+ is a great use of hide and reveal principles to show a fitness award earned by the user. The spin of the 3D element is what is most intriguing about it – it is simple as to not be distracting, elegant, and engaging.
This animation found on Dribble uses match cuts to transition between elements in the piece. On top of this all of the motion is smooth and natural, not static.
This animation also found on Dribble does really great with the small things. The elements that the user interact with have simple animation that makes the software more understandable and flow better. The transitions between sections also delineate between each other without being jarring.
Submit Button
This submit button is just a great example of solid animation. The user of 3D perspective is super effective.
UI Dashboard
Although the animations within the dashboard here are lacking, the reason I pulled this is because of it’s presentation. It does a great job showing the different parts of the screen, guiding the viewer through it.
Hi! My name is Peyton McKenzie.
I am a professional graphic designer, photographer and content creator.
I encourage you to explore my portfolio to get a better idea of the work I create. If you are interested in working with me or have inquiries of any kind, don’t hesitate to reach out over email.
