BRAND STYLE GUIDE: SHAPE ANIMATION
Shape Animation
Shape animation guidelines are created to help the brand stay consistent within the different platforms, where animation can be involved, i.e. presentations, brand videos, social media videos, web pages, etc.
Symbol Animation
The animation of the layout begins from the right side of the x-axis exclusively. As the shape reaches its intended location, it undergoes a slight bouncing motion in the same direction before returning to its final position.
The photo or video is affected by this bouncing effect. The footage is nested using an alpha matte and requires an additional background in vertical format to achieve the desired effect.
The animation of the star or logo concludes the entire sequence with a seamless transition. The "animation out" is essentially the reverse order of the "animation in."
Mixed Layout
The layout animation initiates from the right side exclusively along the x-axis. Secondary shapes, which are horizontally separated, animate in from the bottom to the top with a slight bounce when they reach their final position.
Horizontal & Vertical Layouts
For horizontal layout, the animation of the layout begins from the bottom exclusively along the y-axis. For vertical – animation begins from the right side exclusively along the x-axis.
The middle layer, which serves as the finishing layer, "opens up" as the other shapes reach their final position.
Type
The headlines are animated using 3D rotation. They gradually reveal in a cascading manner from top to bottom, while also rotating along the z-axis. The timing of the animation is synchronized with the corresponding parent shapes as they reach their final positions.
Secondary texts animate by adjusting the opacity value, gradually revealing the subject from the top to the bottom of the corresponding layout shape. The timing of the animation is synchronized with the corresponding parent shapes as they reach their final positions.
