<aside> 👇🏽

This page is from documentation I created to show animation samples across AR cooking panels and supporting mobile menus. I broke down how each animation should behave by creating the animations in After Effects then detailing the behavior in Notion for ease of dev implementation.

</aside>

AR Animation Samples

A.3.0 - A.3.7 [Cooking Panels]

animation-AR2.mp4

Step.mov

  1. Video scales in
  2. Ingredients and steps panel scale in if they were turned on during setup
  3. Content in each panel fades in

Whenever recipe and steps panels are turned off they should animate out in reverse. When turned back on, they should animate back in the same way they originally animated in

Mobile Animation Samples

Mobile - Info Menu

Menu%20Animation.mp4

  1. On tap, newly selected menu item highlights
  2. Green selection indicator bar follows

Mobile - Nav Menu

M.0.0%20-%20Mobile%20Home%20%E2%80%93%20menu%202.mp4

  1. On tap, newly selected menu item highlights and grows ~110% larger before settling at 100%
  2. Green selection indicator bar follows

Mobile - Review

M.8.0%20-%20Rate%20%E2%80%93%201_1.mp4

  1. Flames appear in an overlapping animation sequence
  2. Flames grow to ~105% before settling back at 100%

Save button