motion-design-recipes

name	motion-design-recipes
description	Create fluid animations using GSAP, CSS, or Lottie.

Motion Design Recipes

This skill provides bionicbot with instructions for designing professional web and app animations.

Instructions

1. Define the type of motion (Scroll-based, Hover, Entrance, Exit).
2. Select the technology (CSS Transitions, GSAP, or Lottie for complex icons).
3. Set easing functions (e.g., ease-in-out, cubic-bezier) for natural feel.
4. Define duration and delay for sequences.
5. Optimize for performance to ensure high frame rates.

Examples

• "Add a smooth fade-in and slide-up animation to all landing page headers."
• "Create a GSAP sequence for a product reveal on scroll."