designing-award-motion

What problem does it solve?

This Skill provides a comprehensive guide and best practices for implementing sophisticated animations, precise motion timing, and effective grid systems in web design, ensuring a polished and professional aesthetic.

Core Features & Use Cases

• Animation Timing: Standardized easing functions, duration scales, and stagger patterns for consistent motion.
• Placeholder Images: Guidelines for using Unsplash direct URLs for thematic and evaluable placeholder images.
• Grid System: Principles for implementing 12-column asymmetric grids with defined content widths and padding.
• Use Case: When designing a new landing page, use this Skill to ensure all entrance animations are smooth, durations are consistent, and the layout adheres to modern, asymmetric grid principles, making the design evaluable from the first build.

Quick Start

Apply the GSAP animation pattern for elements entering the viewport with a duration of 0.7 seconds and power3.out easing.