MICRO ANIMATIONS
INSTRUCTOR
BRIAN CASSIDY
MOTION GRAPHICS
ELEMENTS
For this project, I utilized After Effects to produce animated motion graphics tailored for specific interactions. The interactions I focused on included Submit Field, Hamburger Menu, Loading Bar, Search Bar, Play/Pause, and Speaker On/Off. This marked my debut experience with After Effects for animation, presenting a rewarding and distinctive challenge.
For this particular interaction, I opted for a simpler animation approach to signify submission. I chose to employ a single shape and manipulate its paths and keyframes to morph into another shape. Additionally, I adjusted the keyframes of the green stroke path to signify progress.
SUBMIT FIELD
My primary objective for this interaction was to design a menu with seamless internal flow. Instead of crafting distinct shapes, I found it more efficient to consider each line within the menu as its own element. Upon interaction, the middle line sweeps to the right, while the remaining two lines intersect to provide feedback and return functionality.
HAMBURGER MENU
SEARCH BAR
I chose to craft an interaction that effectively communicated push feedback. Furthermore, I introduced an additional shape behind the red search button, which would expand upon clicking the button to provide appropriate feedback. Additionally, I incorporated a "typewriter" effect to visually represent typing actions.
PLAY/PAUSE BUTTON
Continuing with the concept of feedback, I aimed to convey both the act of pushing a button and a shape that loops back into itself. I manipulated the gray circle using scale keyframes and incorporated strokes around the shape to accentuate the pushing motion. Additionally, I ensured proper timing and opacity adjustments to seamlessly integrate the play and pause shapes.
Developing this interaction posed a few challenges, yet I aimed to ensure the percentage indicator accurately corresponded with the progress bar. By adjusting values meticulously, I simulated the percentage to dynamically follow the movement of the inner bar, ensuring more accuracy.
LOADING BAR
The main emphasis of this interaction was on crafting elements that interacted seamlessly. Adjusting the sliding bar was relatively straightforward, achieved through the use of keyframes. However, refining the speaker waves required more fine-tuning to achieve the desired effect.
