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."