Download

Block Animations Extension

Written by

in

Block Animations Extension

Add stunning entrance and exit animations to ANY WordPress block with the Block Animations extension. Works with core blocks and third-party blocks!

What is Block Animations?

A universal extension that adds:

  • 24+ entrance animation effects
  • Works with ALL WordPress blocks
  • Customizable duration, delay, and easing
  • Respects prefers-reduced-motion for accessibility
  • Pure CSS implementation (no JavaScript libraries)
  • Scroll-triggered animations

Available Animation Effects

Fade Animations

  • Fade In
  • Fade In Up
  • Fade In Down
  • Fade In Left
  • Fade In Right

Slide Animations

  • Slide In Up
  • Slide In Down
  • Slide In Left
  • Slide In Right

Zoom Animations

  • Zoom In
  • Zoom In Up
  • Zoom In Down
  • Zoom In Left
  • Zoom In Right

Special Effects

  • Bounce In
  • Flip In X
  • Flip In Y
  • Rotate In

How to Use

  1. Select ANY WordPress block
  2. In the sidebar, find the Animation panel
  3. Enable animations
  4. Choose an entrance effect from dropdown
  5. Set duration (default: 800ms)
  6. Set delay (default: 0ms)
  7. Choose easing function
  8. Save and preview on frontend

Animation Settings

Duration: How long the animation takes (200ms – 2000ms)

Delay: Wait time before animation starts (0ms – 2000ms)

Easing: Animation timing function

  • Ease – Standard smooth animation
  • Ease In – Slow start, fast end
  • Ease Out – Fast start, slow end
  • Ease In Out – Slow start and end
  • Linear – Constant speed

Creating Staggered Animations

For a professional effect, animate multiple blocks with staggered delays:

  1. Block 1: Fade In Up, delay 0ms
  2. Block 2: Fade In Up, delay 200ms
  3. Block 3: Fade In Up, delay 400ms

This creates a cascading effect where blocks animate one after another.

Common Animation Patterns

Hero Section

  • Heading: Fade In Up, 800ms, 200ms delay
  • Paragraph: Fade In Up, 800ms, 400ms delay
  • Button: Fade In Up, 800ms, 600ms delay

Feature Grid

  • Each grid item: Fade In Up with increasing delays (0ms, 100ms, 200ms, etc.)

Image and Text

  • Image: Slide In Left, 1000ms
  • Text: Fade In Right, 1000ms, 200ms delay

Best Practices

  • Use animations sparingly (too many = overwhelming)
  • Stick to one animation style per section
  • Keep duration between 600-1000ms for best feel
  • Use delays to create flow and hierarchy
  • Test on actual devices (not just desktop)
  • Animations only play on frontend (not in editor)

Accessibility

The plugin respects the prefers-reduced-motion setting:

  • Users who prefer reduced motion see instant display (no animation)
  • Enabled by default in plugin settings
  • Ensures accessible experience for all users

Global Animation Settings

Go to Settings > DesignSetGo > Animation Settings:

  • Enable/disable animations globally
  • Set default duration
  • Set default easing
  • Toggle prefers-reduced-motion respect

Performance

  • Pure CSS animations (no JavaScript overhead)
  • Hardware accelerated for smooth playback
  • Minimal impact on page load time
  • Works on all modern browsers

More posts