Skip to content

entrance-animations.md

Latest commit

 

History

History
459 lines (344 loc) · 11.6 KB

entrance-animations.md

File metadata and controls

459 lines (344 loc) · 11.6 KB
Raw

Entrance Animations

Entrance animations bring elements into view with impact and style. Perfect for element reveals, page transitions, and progressive disclosure patterns.

Overview

Entrance animations are time-based animations designed to reveal content with visual impact. They typically run once when triggered and range from 300-1500ms in duration. All entrance animations start with elements in a hidden or transformed state and animate them to their final visible position.

Key Characteristics

  • Purpose: Element reveals and transitions
  • Duration: 300-1500ms (configurable)
  • Trigger: Manual, intersection observer, or page load
  • Target: Any DOM element
  • State: One-time animations (not loops)

Animation Categories

🌟 Fade & Opacity

Simple opacity-based reveals for subtle entrances.

🎯 Directional Movement

Elements slide, glide, or float in from specific directions.

🔄 3D Transforms

Sophisticated perspective-based animations with rotation and depth.

⚡ Dynamic & Bouncy

Spring-based animations with elastic movement and bouncing.

🎨 Shape & Clip

Creative reveals using clip-path and shape morphing.

Complete Preset Reference

Animation Category Complexity Power Levels Directions Description
FadeIn Fade Simple - - Clean opacity transition
ArcIn 3D Complex ✓ 4-way Curved motion with 3D rotation
BounceIn Dynamic Medium ✓ 5-way + center Spring-based entrance with bounce
SlideIn Movement Medium ✓ 4-way Slide from edge with clip reveal
GlideIn Movement Medium ✓ 360° Smooth directional movement
FlipIn 3D Medium ✓ 4-way 3D flip rotation entrance
DropIn Dynamic Simple ✓ - Scale-based drop with easing
ExpandIn Dynamic Medium ✓ 9-way Scale from specific origin points
FloatIn Movement Simple - 4-way Gentle floating movement
SpinIn Dynamic Medium ✓ 2-way Rotation with scale entrance
FoldIn 3D Complex ✓ 4-way 3D fold with perspective
TurnIn 3D Complex ✓ 4-corner Complex 3D corner rotation
CircleIn Movement Complex - 2-way Circular arc movement
CurveIn 3D Complex - 4-way Curved 3D perspective entrance
PunchIn Dynamic Complex ✓ 5-way Multi-stage bouncing animation
RevealIn Clip Medium - 4-way Clean clip-path reveal
SlideIn Clip Medium ✓ 4-way Combined slide and clip
TiltIn 3D Complex - 2-way 3D tilt with clip reveal
WinkIn Clip Medium - 2-way Accordion-style reveal
ShapeIn Clip Medium - 5 shapes Morphing shape reveals
ShuttersIn Clip Complex ✓ 4-way Multi-segment shutter effect
GrowIn Movement Medium ✓ 360° Directional scale growth
BlurIn Filter Simple ✓ - Blur-to-focus transition
GlitchIn Movement Medium ✓ 360° Modified glide with glitch feel

Configuration Patterns

Basic Usage

const animation = getWebAnimation(element, {
  type: 'TimeAnimationOptions',
  namedEffect: { type: 'FadeIn' },
  duration: 800,
  easing: 'easeOut',
});

Power Levels

Many entrance animations support power intensity levels:

// Soft - Subtle, 10-30% intensity
{ type: 'BounceIn', power: 'soft' }

// Medium - Balanced, 50-70% intensity
{ type: 'BounceIn', power: 'medium' }

// Hard - Dramatic, 80-100% intensity
{ type: 'BounceIn', power: 'hard' }

Directional Controls

Animations with directional support:

// Four directions
{ type: 'SlideIn', direction: 'left' | 'right' | 'top' | 'bottom' }

// Eight directions (includes corners)
{ type: 'ExpandIn', direction: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' }

// Angles (0° = up, 90° = right, 180° = down, 270° = left)
{ type: 'GlideIn', direction: 45 }

// Special directions
{ type: 'BounceIn', direction: 'center' } // From center outward

Custom Parameters

Fine-tune animations with specific parameters:

// Distance control
{
  type: 'GlideIn',
  direction: 270,
  distance: { value: 100, type: 'px' },
  startFromOffScreen: true
}

// Scale control
{
  type: 'DropIn',
  initialScale: 2.0,
  power: 'hard'
}

// Shape selection
{
  type: 'ShapeIn',
  shape: 'circle' | 'rectangle' | 'diamond' | 'ellipse' | 'window'
}

// Complex configurations
{
  type: 'PunchIn',
  direction: 'top-right',
  power: 'medium'
}

Detailed Animation Guides

🌟 Simple Fades

FadeIn

Best for: Subtle content reveals, overlays, modals

{
  type: 'FadeIn',
  // No additional parameters - pure opacity transition
}

BlurIn

Best for: Focus transitions, image reveals

{
  type: 'BlurIn',
  blur: 25,        // Blur amount in pixels
  power: 'medium'  // or custom blur amount
}

🎯 Directional Movement

SlideIn

Best for: Navigation, panels, content blocks

{
  type: 'SlideIn',
  direction: 'left',    // 'top', 'right', 'bottom', 'left'
  power: 'medium',      // Controls slide distance
  initialTranslate: 1   // Custom distance multiplier
}

GlideIn

Best for: Hero elements, cards, flexible directional reveals

{
  type: 'GlideIn',
  direction: 225,                              // Angle in degrees
  distance: { value: 150, type: 'px' },       // Movement distance
  power: 'medium',                             // Easing intensity
  startFromOffScreen: false                    // Start from viewport edge
}

FloatIn

Best for: Lightweight content, tooltips, notifications

{
  type: 'FloatIn',
  direction: 'bottom'   // 'top', 'right', 'bottom', 'left'
  // Fixed 120px distance, gentle easing
}

🔄 3D Transforms

ArcIn

Best for: Hero content, featured elements, dramatic reveals

{
  type: 'ArcIn',
  direction: 'right',   // 'top', 'right', 'bottom', 'left'
  power: 'medium'       // Controls rotation intensity
}

FlipIn

Best for: Cards, panels, interactive elements

{
  type: 'FlipIn',
  direction: 'top',     // Flip axis direction
  power: 'hard',        // Rotation amount
  initialRotate: 180    // Custom rotation angle
}

FoldIn

Best for: Paper-like elements, creative reveals

{
  type: 'FoldIn',
  direction: 'top',     // Fold direction
  power: 'medium',      // Rotation intensity
  initialRotate: 90     // Fold angle
}

⚡ Dynamic & Bouncy

BounceIn

Best for: Buttons, icons, playful elements

{
  type: 'BounceIn',
  direction: 'bottom',      // 'top', 'right', 'bottom', 'left', 'center'
  power: 'medium',          // Bounce intensity
  distanceFactor: 1         // Movement distance
}

DropIn

Best for: Modals, dropdowns, floating elements

{
  type: 'DropIn',
  power: 'medium',      // Scale amount
  initialScale: 1.6     // Starting scale (>1 = larger)
}

PunchIn

Best for: Attention-grabbing elements, call-to-actions

{
  type: 'PunchIn',
  direction: 'top-right',   // Corner directions or 'center'
  power: 'hard'             // Multi-bounce intensity
}

🎨 Shape & Clip Effects

ShapeIn

Best for: Creative reveals, masked content, artistic elements

{
  type: 'ShapeIn',
  shape: 'circle'       // 'circle', 'rectangle', 'diamond', 'ellipse', 'window'
}

RevealIn

Best for: Content blocks, images, clean reveals

{
  type: 'RevealIn',
  direction: 'left'     // Reveal direction
}

ShuttersIn

Best for: Dynamic reveals, segmented content

{
  type: 'ShuttersIn',
  direction: 'right',   // Shutter direction
  shutters: 12,         // Number of segments
  staggered: true,      // Offset timing
  power: 'medium'       // Effect intensity
}

Timing and Easing

Recommended Durations

  • Quick reveals: 300-500ms (FadeIn, BlurIn)
  • Standard entrances: 600-900ms (SlideIn, GlideIn, DropIn)
  • Complex 3D: 800-1200ms (ArcIn, FlipIn, FoldIn)
  • Bouncy effects: 1000-1500ms (BounceIn, PunchIn)

Easing Recommendations

// Smooth and natural
easing: 'easeOutQuart'; // Quick start, slow end

// Bouncy and playful
easing: 'backOut'; // Overshoot effect

// Dramatic and strong
easing: 'elasticOut'; // Spring effect

// Clean and linear
easing: 'cubicInOut'; // Balanced acceleration

Performance Tips

Batch Multiple Entrances

// Staggered entrance sequence
const elements = document.querySelectorAll('.reveal-item');
elements.forEach((el, index) => {
  const animation = getWebAnimation(el, {
    type: 'TimeAnimationOptions',
    namedEffect: { type: 'SlideIn', direction: 'bottom' },
    duration: 600,
    delay: index * 100, // 100ms stagger
  });
  animation.play();
});

CSS Mode for Simple Effects

// Use CSS animations for better mobile performance
import { getCSSAnimation } from '@wix/motion';

const cssRules = getCSSAnimation('elementId', {
  type: 'TimeAnimationOptions',
  namedEffect: { type: 'FadeIn' },
  duration: 500,
});

Common Patterns

Modal Entrance

const modalAnimation = getWebAnimation(modal, {
  type: 'TimeAnimationOptions',
  namedEffect: {
    type: 'DropIn',
    power: 'medium',
  },
  duration: 400,
  easing: 'backOut',
});

Hero Section Reveal

const heroAnimation = getWebAnimation(heroElement, {
  type: 'TimeAnimationOptions',
  namedEffect: {
    type: 'ArcIn',
    direction: 'bottom',
    power: 'hard',
  },
  duration: 1200,
  easing: 'quintOut',
});

Card Grid Stagger

document.querySelectorAll('.card').forEach((card, i) => {
  getWebAnimation(card, {
    type: 'TimeAnimationOptions',
    namedEffect: {
      type: 'GlideIn',
      direction: 45,
      distance: { value: 100, type: 'px' },
    },
    duration: 800,
    delay: i * 150,
    easing: 'cubicOut',
  }).play();
});

Accessibility Considerations

Respect Motion Preferences

const respectsReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const duration = respectsReducedMotion ? 200 : 800;
const animationType = respectsReducedMotion ? 'FadeIn' : 'BounceIn';

Focus Management

// Ensure focus is visible after animation
await animation.play();
element.focus();

Next: Explore Ongoing Animations for continuous looping effects, or return to the Category Overview.