Block Editor Animations 1.3.1: New Animation Presets Feature Explained

Block Editor Animations version 1.3.1 introduces a game-changing feature that’s transforming how WordPress users create animated blocks: Animation Presets.

If you’ve ever spent 15 minutes configuring animation settings for a single block—adjusting duration, delay, offset, easing, and effect—only to repeat the process for every similar block on your site, this update is for you.

Animation Presets in Block Editor Animations 1.3.1 solve a major pain point by packaging complete animation configurations into one-click presets. Instead of manually adjusting 7+ settings every time, you simply select a preset and instantly apply professionally configured animations.

In this comprehensive guide, you’ll learn:

• What Block Editor Animations presets are and how they work
• The 5 built-in presets included in version 1.3.1
• Step-by-step guide to using animation presets
• How presets differ from simple animation effects
• Real-world use cases and examples
• What’s coming in future versions
• How the Pro version expands preset functionality

Let’s explore how Block Editor Animations 1.3.1 makes animation faster, easier, and more consistent.

What Are Animation Presets?

Before diving into the specifics of Block Editor Animations presets, let’s clarify what presets are and why they matter.

The Problem Presets Solve

Traditional animation workflow requires configuring multiple settings for each block:

1. Animation Effect – Choose from 20+ options (fade, slide, zoom, etc.)
2. Duration – Set animation length in milliseconds
3. Delay – Define wait time before animation starts
4. Offset – Configure viewport distance trigger point
5. Easing – Select acceleration curve
6. Anchor – Set animation origin point
7. Additional options – Once, mirror, disable on mobile, etc.

For a single block, this takes 2-3 minutes. For a complete page with 10-15 animated blocks, you’re looking at 30+ minutes of repetitive configuration.

How Animation Presets Help

Block Editor Animations presets bundle all these settings into named configurations you can apply instantly:

Without presets (old way):

• Click animation effect dropdown → select “Fade Up”
• Adjust duration slider → set to 600ms
• Modify delay → set to 0ms
• Configure offset → set to 120px
• Choose easing → select “ease-out”
• Time: 2-3 minutes per block

With presets (new way):

• Click preset dropdown → select “Smooth Slide Up”
• Time: 5 seconds per block

The preset instantly applies all optimized settings, saving valuable time while ensuring professional, consistent results.

Presets vs. Animation Effects

It’s important to understand how Block Editor Animations presets differ from animation effects:

Animation Effects:

• Just the visual movement type (fade, slide, zoom, bounce)
• No timing or easing configured
• Basic building block
• Requires manual configuration of other settings

Animation Presets:

• Complete animation package
• Effect + duration + delay + offset + easing
• Ready-to-use configuration
• Optimized for specific use cases
• Professional results immediately

Think of it this way:

• Animation effects = Individual ingredients
• Animation presets = Complete recipes

The 5 Built-In Animation Presets in Version 1.3.1

Block Editor Animations 1.3.1 includes five carefully crafted presets designed for common WordPress use cases.

1. Subtle Fade In

Best for: Body text, paragraphs, supporting content, images

What it does: Creates a gentle, professional appearance effect that doesn’t distract from content. Perfect for text-heavy pages where animations should enhance rather than dominate.

Configuration:

• Effect: Fade
• Duration: 500ms (quick and subtle)
• Delay: 0ms (starts immediately)
• Offset: 120px (standard trigger distance)
• Easing: ease-out (smooth deceleration)

Use cases:

• Blog post content blocks
• About page text sections
• Product descriptions
• Team member bios
• Supporting images

Why this preset works: The 500ms duration is fast enough to feel responsive but slow enough to be noticeable. The fade effect is universally appropriate and doesn’t call excessive attention.

2. Attention Bounce

Best for: Call-to-action buttons, important announcements, featured elements

What it does: Adds energetic bounce animation that demands attention without being overwhelming. Creates playful, engaging feel perfect for conversion elements.

Configuration:

• Effect: Bounce In
• Duration: 600ms (enough time for bounce to complete)
• Delay: 200ms (lets context appear first)
• Offset: 140px (slightly earlier trigger)
• Easing: ease-out (natural bounce deceleration)

Use cases:

• Primary CTA buttons
• “Sign up now” sections
• Limited time offers
• Download buttons
• Contact form highlights

Why this preset works: The 200ms delay ensures surrounding context appears first, so users understand what they’re bouncing toward. The bounce effect creates urgency and draws eyes naturally.

3. Smooth Slide Up

Best for: Feature boxes, cards, testimonials, list items

What it does: Elements slide smoothly from bottom to top, creating upward progression feel. Professional and clean, works for virtually any content type.

Configuration:

• Effect: Slide Up
• Duration: 650ms (balanced speed)
• Delay: 0ms (can be adjusted per block)
• Offset: 120px (standard trigger)
• Easing: ease-out (smooth upward motion)

Use cases:

• Feature card grids
• Service offerings
• Team member cards
• Blog post previews
• Testimonial sections
• Pricing tables

Why this preset works: Slide up creates natural upward movement that guides eyes through content. The 650ms duration is slow enough to feel smooth but fast enough to maintain engagement.

4. Dynamic Zoom In

Best for: Hero images, headlines, important visuals, focal points

What it does: Elements scale from small to full size with emphasis, creating depth and drawing immediate attention. Bold and confident.

Configuration:

• Effect: Zoom In
• Duration: 800ms (dramatic but not slow)
• Delay: 0ms (immediate impact)
• Offset: 150px (earlier trigger for above-fold content)
• Easing: ease-out (confident deceleration)

Use cases:

• Hero section images
• Homepage headlines
• Product showcase images
• Logo reveals
• Featured banners
• Landing page focal points

Why this preset works: The 800ms duration gives zoom enough time to create impact without feeling sluggish. Higher offset (150px) ensures animation completes before element reaches center viewport.

5. Elegant Rotate

Best for: Icons, decorative elements, creative sections, brand elements

What it does: Combines rotation with fade for sophisticated entrance effect. Adds creative flair without being gimmicky.

Configuration:

• Effect: Rotate In
• Duration: 700ms (allows rotation to complete smoothly)
• Delay: 100ms (slight pause for sophistication)
• Offset: 130px (moderate trigger distance)
• Easing: ease-in-out (smooth start and end)

Use cases:

• Icon boxes
• Decorative graphics
• Creative portfolio items
• Brand elements
• Infographic components
• Award badges

Why this preset works: The ease-in-out easing creates elegant motion that feels intentional. The 100ms delay adds sophistication by preventing instant rotation.

How to Use Animation Presets in Block Editor Animations

Using Block Editor Animations presets is incredibly straightforward. Here’s your step-by-step guide.

Step 1: Update to Version 1.3.1

Ensure you have Block Editor Animations 1.3.1 or higher:

1. Go to Plugins in WordPress admin
2. Check for updates
3. Update Block Editor Animations if available
4. Or visit WordPress.org to download latest version

Step 2: Open a Page with Gutenberg

1. Navigate to Pages or Posts
2. Open any page in the Block Editor
3. Or create a new page to test presets

Step 3: Select a Block to Animate

1. Click any supported block on your page
2. Supported blocks include:
   • Groups
   • Columns
   • Images
   • Headings
   • Paragraphs
   • Buttons
   • (Pro version supports all blocks)

Step 4: Locate the Animation Panel

1. Look at the right sidebar
2. Find the Animation panel
3. It should be visible by default
4. If collapsed, click to expand

Step 5: Open Quick Presets Dropdown

At the top of the Animation panel, you’ll see:

Quick Presets dropdown

This is the new feature in Block Editor Animations 1.3.1.

Step 6: Select a Preset

Click the dropdown and choose from:

• Subtle Fade In
• Attention Bounce
• Smooth Slide Up
• Dynamic Zoom In
• Elegant Rotate

The moment you select a preset, all animation settings automatically populate with optimized values.

Step 7: Preview the Animation

1. Click Preview button in Block Editor
2. Open preview in new tab
3. Scroll to see animation trigger
4. Return to editor if adjustments needed

Step 8: Adjust if Needed (Optional)

After applying a Block Editor Animations preset, you can still customize:

• Duration – Make faster or slower
• Delay – Add sequential timing
• Offset – Change trigger distance
• Easing – Modify acceleration

Note: Adjusting any setting manually will clear the preset selection, allowing full customization while maintaining the preset’s values as your starting point.

Step 9: Save or Publish

1. Click Save Draft or Publish
2. View live page
3. Test animation on actual site

Preset Persistence and Behavior

Understanding how Block Editor Animations presets behave helps you use them more effectively.

Preset Selection is Saved

When you apply a preset to a block:

• The preset selection is stored in block attributes
• After saving and reopening the page, the preset dropdown shows your selection
• You can see at a glance which preset is applied

This was a key improvement in version 1.3.1.

Manual Changes Clear Preset Selection

If you apply a preset then manually adjust any setting:

• The preset dropdown resets to “Default (no preset)”
• Your custom settings remain in place
• This prevents confusion about whether preset or custom settings apply

Example:

1. Apply “Smooth Slide Up” preset
2. Manually change duration from 650ms to 800ms
3. Preset dropdown resets to “Default”
4. Your 800ms custom duration is preserved

This behavior ensures clarity about the source of your animation settings.

Presets Populate All Controls

When you select a Block Editor Animations preset:

• Animation Effect dropdown shows the preset’s effect
• Duration control displays the preset’s duration
• Delay control displays the preset’s delay
• Offset control displays the preset’s offset
• Easing dropdown shows the preset’s easing

All controls properly populate, so you can see exactly what settings the preset applies. This transparency helps you learn optimal animation configurations.

Switching Between Presets

You can switch presets on a block at any time:

1. Select block with existing preset
2. Open Quick Presets dropdown
3. Choose different preset
4. New preset’s settings immediately apply

This makes it easy to experiment with different Block Editor Animations presets until you find the perfect fit.

Real-World Use Cases

Let’s explore practical examples of using Block Editor Animations presets in common scenarios.

Use Case 1: Creating a Landing Page

Scenario: You’re building a product landing page with hero section, features, testimonials, and CTA.

Preset application:

Hero headline:

• Preset: Dynamic Zoom In
• Reason: Demands attention immediately
• Time saved: 2 minutes

Hero subheading:

• Preset: Subtle Fade In
• Manual adjustment: Add 200ms delay
• Reason: Appears after headline
• Time saved: 1.5 minutes

Feature cards (3 cards):

• Preset: Smooth Slide Up for each
• Manual adjustment: Stagger delays (0ms, 150ms, 300ms)
• Reason: Creates sequential reveal
• Time saved: 5 minutes (for all three)

Testimonial:

• Preset: Subtle Fade In
• Reason: Professional without distraction
• Time saved: 2 minutes

CTA button:

• Preset: Attention Bounce
• Reason: Draws attention to conversion point
• Time saved: 2 minutes

Total time saved: 12.5 minutes compared to manual configuration.

Use Case 2: Animating a Blog Post

Scenario: Adding subtle animations to blog content for enhanced reading experience.

Preset application:

Featured image:

• Preset: Dynamic Zoom In
• Reason: Engaging intro to post

Body paragraphs (select multiple):

• Preset: Subtle Fade In
• Applied to 5-6 key paragraphs
• Time saved: 10 minutes (2 min × 5 blocks)

Pull quotes or callouts:

• Preset: Elegant Rotate
• Reason: Visual distinction from body text

Related posts section:

• Preset: Smooth Slide Up
• Applied to post preview cards

Total time saved: 15+ minutes with consistent, professional results.

Use Case 3: E-commerce Product Page

Scenario: Creating engaging product page with images, description, reviews, and purchase button.

Preset application:

Product images:

• Preset: Dynamic Zoom In
• Reason: Emphasizes product visuals
• Applied to 3-4 images
• Time saved: 8 minutes

Product description:

• Preset: Subtle Fade In
• Reason: Readable without distraction

Features list:

• Preset: Smooth Slide Up
• Applied to each feature point
• Manual adjustment: Staggered delays
• Time saved: 6 minutes

Add to cart button:

• Preset: Attention Bounce
• Reason: Critical conversion element
• Time saved: 2 minutes

Reviews section:

• Preset: Subtle Fade In
• Applied to review cards

Total time saved: 20+ minutes while maintaining brand consistency.

Tips for Using Block Editor Animations Presets Effectively

Maximize the benefits of animation presets with these professional tips.

Tip 1: Start with Presets, Customize if Needed

Best practice:

1. Always apply a preset first
2. Preview the result
3. Only customize if the preset doesn’t quite fit

Why this works: Block Editor Animations presets are professionally tuned. In most cases, they work perfectly without adjustment. Customizing only when truly needed saves time.

Tip 2: Use Consistent Presets Throughout Site

Best practice: Create a site-wide animation style guide:

• Headlines: Dynamic Zoom In or Subtle Fade In
• Body text: Subtle Fade In
• Images: Dynamic Zoom In
• Buttons: Attention Bounce
• Cards: Smooth Slide Up
• Icons: Elegant Rotate

Why this works: Consistency creates professional feel. Users subconsciously recognize patterns, making your site feel cohesive and polished.

Tip 3: Stagger Delays for Multiple Blocks

Best practice: When applying same preset to multiple blocks:

1. Apply preset to all blocks
2. Leave first block delay at 0ms
3. Add 150ms delay to second block
4. Add 300ms delay to third block
5. Continue pattern

Why this works: Block Editor Animations presets provide perfect base configuration. Adding staggered delays creates sequential reveals while maintaining preset’s other optimized settings.

Tip 4: Mix Presets Strategically

Best practice: Don’t use the same preset for everything:

• High priority: Attention Bounce, Dynamic Zoom In
• Medium priority: Smooth Slide Up
• Low priority: Subtle Fade In
• Decorative: Elegant Rotate

Why this works: Different preset energy levels create visual hierarchy. Important elements get bold animations while supporting content stays subtle.

Tip 5: Document Your Preset Choices

Best practice: Keep notes on which presets you use where:

• Homepage hero: Dynamic Zoom In
• Feature sections: Smooth Slide Up
• Blog content: Subtle Fade In
• CTAs: Attention Bounce

Why this works: Documentation ensures consistency when you or team members add content later. Especially valuable for multi-page sites or team projects.

Understanding the Pro Version Preset Features

While Block Editor Animations 1.3.1 introduces presets to the free version, the Pro version dramatically expands preset functionality.

Free vs. Pro: Preset Comparison

Free Version (5 Presets):

• ✓ 5 built-in presets
• ✓ Read-only (can’t edit)
• ✓ One-click application
• ✓ Preset persistence
• ✗ Cannot create custom presets
• ✗ Cannot edit existing presets
• ✗ Cannot import/export presets
• ✗ No preset library management

Pro Version (Unlimited Presets):

• ✓ 5 built-in presets (same as free)
• ✓ Create unlimited custom presets
• ✓ Edit any preset
• ✓ Save your own preset library
• ✓ Import/export presets
• ✓ Share presets across sites
• ✓ Delete unwanted presets
• ✓ Rename presets

Custom Presets in Pro

The Pro version’s most powerful feature is custom preset creation:

Creating a custom preset:

1. Configure animation exactly how you want it:
   • Select effect
   • Set duration
   • Configure delay
   • Adjust offset
   • Choose easing
   • Set any advanced options
2. Click “Save as Preset” button
3. Name your preset:
   • “Brand Headline Animation”
   • “Product Card Reveal”
   • “Testimonial Fade”
4. Preset now appears in your Quick Presets dropdown
5. Apply to any block, any time

Example use case:

Your brand guideline specifies:

• All headlines: Fade Up, 700ms, ease-out, 150px offset
• All buttons: Bounce, 550ms, 250ms delay, ease-in-out

Create custom presets:

• “Brand Headline” preset
• “Brand Button” preset

Now anyone on your team can apply brand-compliant animations instantly.

Import/Export in Pro

Share presets across multiple sites:

Export:

1. Create perfect presets on site A
2. Export preset library as JSON file
3. Receives downloadable file

Import:

1. Open site B
2. Import preset JSON file
3. All presets now available on site B

Perfect for:

• Agencies managing multiple clients
• Multisite networks
• Template sites
• Team consistency

Preset Library Management

Pro version includes full preset management:

• View all custom presets
• Edit existing presets
• Delete unused presets
• Reorder preset list
• Organize by category or project

This makes Block Editor Animations presets a true workflow tool rather than just a convenience feature.

What’s New in Version 1.3.1

Beyond Block Editor Animations presets, version 1.3.1 includes additional improvements.

Dashboard Widget

New at-a-glance statistics:

• Total animated posts/pages
• Total animated blocks
• Days plugin has been active
• Quick links to settings and documentation

Access from WordPress dashboard home screen.

Enhanced Onboarding

New users see:

• Welcome notice with quick start guide
• Pointer system highlighting key features
• Interactive walkthrough of first animation
• Links to video tutorials

Makes learning Block Editor Animations faster.

Improved Security

Version 1.3.1 includes security enhancements:

• Proper nonce verification in AJAX handlers
• Capability checks for admin actions
• Sanitization improvements
• WP Pointer dismissal security

Bug Fixes

Version 1.3.1 addresses:

• Preset dropdown now shows selected preset after save/reload
• Preset application properly populates all controls
• RangeControl inputs convert between string storage and number display
• Manual setting changes correctly clear preset selection

Updated Translations

Complete translations updated:

• Spanish (es_ES) – 145 strings
• French (fr_FR) – 145 strings
• Italian (it_IT) – 145 strings

Performance Impact of Using Presets

An important question: Do Block Editor Animations presets affect site performance?

The Short Answer: No

Presets are a workflow feature, not a runtime feature.

How Presets Work Behind the Scenes

When you apply a preset:

1. Plugin populates block attributes with preset values
2. Block saves these values (effect, duration, delay, etc.)
3. Frontend loads just like any animated block
4. No additional CSS or JavaScript for presets

Result: Blocks with presets perform identically to manually configured blocks with the same settings.

Performance Is Settings-Dependent

What affects performance:

• ✓ Animation duration (longer = more processing)
• ✓ Number of simultaneous animations
• ✓ Complexity of animation effect
• ✓ Image size being animated

What doesn’t affect performance:

• ✗ Using presets vs. manual configuration
• ✗ Number of different presets used
• ✗ Switching between presets

Block Editor Animations presets simply make configuration faster—they don’t change frontend performance.

Upgrading to Version 1.3.1

How to Update

Method 1: Dashboard update

1. Go to Dashboard > Updates
2. Check for Block Editor Animations update
3. Click Update Now
4. Wait for completion

Method 2: Plugins page

1. Go to Plugins > Installed Plugins
2. Find Block Editor Animations
3. Click Update Now if available

Method 3: Manual update

1. Download latest version from WordPress.org
2. Deactivate current version
3. Delete current version
4. Upload new ZIP file
5. Activate

After Updating

What to do:

1. Clear all caches (browser, WordPress, CDN)
2. Visit any page with animated blocks
3. Verify animations still work
4. Test new preset feature
5. Explore dashboard widget

Existing animations: All existing animations continue working perfectly. Version 1.3.1 is fully backward compatible.

Frequently Asked Questions

Can I use presets with any block?

Block Editor Animations presets work with all supported blocks. Free version supports 8 core blocks (groups, columns, images, headings, paragraphs, buttons). Pro version supports all WordPress blocks.

Will existing animations be affected?

No. Existing animations remain unchanged. Presets are an additive feature that doesn’t modify existing functionality.

Can I modify preset settings after applying?

Yes. After applying a preset, all settings become editable. Modify any setting as needed. The preset dropdown will reset to “Default” to indicate custom configuration.

Do presets work on mobile?

Absolutely. Block Editor Animations presets apply the same on all devices. Animations respect device capabilities and user preferences (like prefers-reduced-motion).

How do I know which preset to use?

Refer to the preset descriptions in this article. General rule:

• Important, attention-grabbing: Attention Bounce, Dynamic Zoom In
• Standard content: Smooth Slide Up, Subtle Fade In
• Creative/decorative: Elegant Rotate

Can free users create custom presets?

No. Custom preset creation is a Pro feature. Free version includes 5 built-in presets that cannot be edited or added to.

Will more presets be added in the future?

The free version will continue including the same 5 presets to maintain consistency. The Pro version allows unlimited custom presets, so you can create as many as needed.

Conclusion

Block Editor Animations 1.3.1 introduces a powerful time-saving feature with Animation Presets that transforms the animation workflow for WordPress users.

Key Takeaways

Block Editor Animations presets:

• Save 60-80% of animation configuration time
• Provide professionally tuned settings
• Ensure consistency across your site
• Make animation accessible to beginners
• Don’t impact performance
• Are fully customizable after application

The 5 built-in presets:

1. Subtle Fade In – Perfect for body content
2. Attention Bounce – Ideal for CTAs
3. Smooth Slide Up – Great for cards and features
4. Dynamic Zoom In – Best for hero sections
5. Elegant Rotate – Excellent for icons and decorative elements

Using presets effectively:

• Start with presets, customize only if needed
• Maintain consistency across your site
• Stagger delays for sequential animations
• Mix preset types to create hierarchy
• Document your choices for team projects

Next Steps

1. Update to version 1.3.1 if you haven’t already
2. Explore the 5 built-in presets on a test page
3. Apply presets to your real site and experience the time savings
4. Share your results in the community
5. Consider Pro version for custom preset creation

Get Block Editor Animations 1.3.1

Ready to experience the time-saving power of animation presets?

• Free version: Download from WordPress.org
• Pro version: Upgrade for unlimited custom presets

Join thousands of WordPress users who are creating stunning animations faster than ever with Block Editor Animations presets.

Have questions about the new preset feature? Visit our support forum or leave a comment below!