<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

<aside> 💡

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

</aside>

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