Animations In Spectra

Introduction

The Animations Extension adds powerful scroll-triggered animations to all Spectra blocks, bringing your content to life as visitors scroll through your pages. Built on the AOS (Animate on Scroll) library, it provides smooth, performant animations with extensive customization options. The free version includes 20+ animation types with basic controls, while Spectra Pro unlocks advanced timing, easing, and repeat options for professional-grade animations. This extension enhances user engagement by creating dynamic, interactive experiences without compromising performance.

How It Works

The Animations Extension brings your content to life by adding scroll-triggered animations to your blocks. As visitors scroll down your page, blocks smoothly animate into view, creating an engaging and professional experience. You can choose from over 20+ different animation styles and customize how fast they play, when they start, and whether they repeat.

Supported Animation Types

Fade Animations

Animation	Description	Best For
Fade	Simple opacity transition	Any content
Fade Up	Fade in while moving up	Text blocks, images
Fade Down	Fade in while moving down	Headers, titles
Fade Left	Fade in from the left	List items, features
Fade Right	Fade in from the right	Testimonials, quotes
Fade Up-Right	Diagonal fade from bottom-left	Feature boxes
Fade Up-Left	Diagonal fade from bottom-right	Alternating content
Fade Down-Right	Diagonal fade from top-left	Hero sections
Fade Down-Left	Diagonal fade from top-right	Call-to-actions

Flip Animations

Animation	Description	Best For
Flip Left	3D flip from left	Cards, features
Flip Right	3D flip from right	Testimonials
Flip Up	3D flip from bottom	Pricing tables
Flip Down	3D flip from top	Headers

Slide Animations

Animation	Description	Best For
Slide Up	Slide in from bottom	Content sections
Slide Down	Slide in from top	Navigation bars
Slide Left	Slide in from right	Side content
Slide Right	Slide in from left	Progressive reveals

Zoom Animations

Animation	Description	Best For
Zoom In	Scale up from small	Images, icons
Zoom In-Up	Zoom with upward motion	Feature highlights
Zoom In-Down	Zoom with downward motion	Hero images
Zoom In-Left	Zoom with leftward motion	Gallery items
Zoom In-Right	Zoom with rightward motion	Product showcases
Zoom Out	Scale down from large	Emphasis elements
Zoom Out-Up	Shrink with upward motion	Exit animations
Zoom Out-Down	Shrink with downward motion	Closing sections
Zoom Out-Left	Shrink with leftward motion	Carousel items
Zoom Out-Right	Shrink with rightward motion	Timeline elements

Using the Animation Extension

Accessing Animation Settings

1. Select any Spectra block in the editor
2. In the block settings sidebar, look for the “Animation” panel
3. Click to open the Animation Type dropdown
4. You can set the Animation Duration (ms) and Animation Delay (ms) [PRO features]
5. To preview the animation in the editor itself, you can click on the Preview button below the play repeatedly setting.

Configuration Options

Setting	Description	Default	Range/Options	Availability
Animation Type	The animation effect to apply	None	20+ animation types	Free
Duration	How long the animation takes	400ms	100-3000ms	Pro
Delay	Wait time before animation starts	0ms	0-3000ms	Pro
Easing	Animation acceleration curve	ease	linear, ease, ease-in, ease-out, ease-in-out	Pro
Once	Animate only on first scroll	true	true/false	Free
Play Repeatedly	Animate every time element scrolls into view	false	true/false	Pro
Preview	Test animation in editor	–	Button action	Free

Step-by-Step Guide

1. Select Your Block
   • Click on any Spectra block you want to animate
   • Can be applied to containers, buttons, icons, etc.
2. Choose Animation Type
   • Open the Animation panel from the block sidebar setting.
   • Select from the dropdown of animation types
   • Consider the block’s position and purpose
3. Adjust Timing(Pro Features)
   • Set Duration for animation speed
   • Add Delay for staggered effects
   • Choose Easing for natural motion
4. Configure Behavior
   • Toggle “Once” for single vs repeated animations (Free)
   • Enable “Play Repeatedly” for multiple triggers (Pro)
   • Use Preview button to test in editor (Free)
5. Fine-tune for Different Devices
   • Animations work on all devices
   • Consider disabling complex animations on mobile
   • Test scroll performance

Pro Features

Unlock advanced animation controls with Spectra Pro to create truly professional, customized animations that perfectly match your design vision.

Animation Duration Control

What it does: Precisely control how long each animation takes to complete, from lightning-fast reveals to slow, dramatic entrances.

Why it matters:

• Create perfect timing for your brand’s personality
• Match animations to your content’s importance
• Synchronize with background music or video content
• Optimize for different screen sizes and devices

Best practices:

• Fast animations (200-400ms): UI elements, buttons, small icons
• Medium animations (500-800ms): Text blocks, images, cards
• Slow animations (1000-1500ms): Hero sections, large containers
• Extra slow (1500ms+): Dramatic reveals, special emphasis

Animation Delay Control

What it does: Add precise timing delays before animations begin, creating sophisticated sequencing and staggered effects.

Why it matters:

• Create cascading reveals across multiple elements
• Build visual hierarchy and guide user attention
• Synchronize animations with other page elements
• Prevent overwhelming users with simultaneous animations

Best practices:

• No delay (0ms): Primary content that should appear immediately
• Short delays (100-300ms): Sequential list items or cards
• Medium delays (400-800ms): Secondary content and supporting elements
• Long delays (1000ms+): Final call-to-action elements

Pro tip: Use 100-200ms increments between related elements for smooth sequencing.

Animation Easing Controls

What it does: Define the acceleration curve of your animations, controlling how they speed up and slow down for natural, polished motion.

Why it matters:

• Create more realistic, physics-based motion
• Match animations to your brand’s personality
• Improve perceived performance and user experience
• Add professional polish to your animations

Available easing options:

• Ease: Gentle start and end with faster middle (most natural)
• Ease-in: Slow start, fast finish (dramatic entrances)
• Ease-out: Fast start, slow finish (gentle landings)
• Ease-in-out: Slow start and end (smooth, polished feel)

Best practices:

• Ease-out: Best for most UI animations and content reveals
• Ease-in: Great for exit animations or dramatic reveals
• Ease: Good default for general content

Play Repeatedly on Scroll

What it does: Allow animations to trigger every time an element scrolls into view, not just the first time.

Why it matters:

• Keep content engaging during longer browsing sessions
• Perfect for testimonials, statistics, or key messaging
• Maintain visual interest on single-page websites
• Ideal for elements users might scroll past quickly

Best use cases:

• Statistics and counters: Recapture attention to important numbers
• Call-to-action buttons: Re-emphasize conversion opportunities
• Testimonials: Keep social proof fresh and noticeable
• Key features: Ensure important content gets multiple chances to be seen

When to avoid:

• Avoid on text-heavy content that users need to read
• Skip for navigation elements that should remain stable
• Don’t use on elements with complex animations that might be jarring

Combining Pro Features

Create Advanced Animation Sequences:

Example 1: Staggered Feature Cards

• Card 1: Fade Up, 0ms delay, 600ms duration, ease-out
• Card 2: Fade Up, 150ms delay, 600ms duration, ease-out
• Card 3: Fade Up, 300ms delay, 600ms duration, ease-out
• Result: Smooth wave effect across your features

Example 2: Hero Section Cascade

• Background: Fade In, 0ms delay, 800ms duration, ease
• Headline: Fade Up, 200ms delay, 600ms duration, ease-out
• Subtext: Fade Up, 400ms delay, 500ms duration, ease-out
• CTA Button: Zoom In, 800ms delay, 400ms duration, ease-out
• Result: Professional, layered reveal

Example 3: Repeating Statistics

• Enable “Play Repeatedly” for statistics section
• Use Zoom In animation, 400ms duration, ease-out
• Result: Numbers recapture attention on every scroll

Best Practices

Animation Selection

1. Match Animation to Content
   • Fade for subtle reveals
   • Slide for directional emphasis
   • Zoom for attention-grabbing
   • Flip for interactive elements
2. Consider User Flow
   • Top content: Fade Down
   • Side content: Fade Left/Right
   • Progressive sections: Fade Up
   • CTAs: Zoom In

Performance Guidelines

1. Optimize for Speed
   • Limit animations per viewport
   • Use shorter durations (400-800ms)
   • Avoid animating large images
   • Test on slower devices
2. Stagger Multiple Animations
   • Use delays for sequential reveals
   • 100-200ms between elements
   • Create visual hierarchy
   • Guide user attention

Accessibility Considerations

1. Respect Motion Preferences
   • Animations honor prefers-reduced-motion
   • Provide content without animation dependency
   • Ensure readability during animation
   • Avoid flashing or strobing effects
2. Maintain Usability
   • Don’t animate critical UI elements
   • Keep navigation stable
   • Ensure content is accessible immediately
   • Test with keyboard navigation

Common Use Cases

1. Hero Section Reveals

Create an impressive entrance for your main content:

• Container: Use Fade Down animation (500ms duration)
• Heading: Apply Fade Up with a 200ms delay
• Description Text: Fade Up with 400ms delay
• Call-to-Action Button: Zoom In with 600ms delay

This creates a cascading effect where elements appear one after another.

2. Feature Grid

Make your features stand out with staggered animations:

• First Feature: Fade Up-Right (600ms)
• Second Feature: Fade Up with 100ms delay
• Third Feature: Fade Up-Left with 200ms delay
• Continue the pattern for additional features

The different directions and delays create visual interest and guide the eye.

3. Testimonial Carousel

Add smooth transitions to your testimonials:

• Slider Container: Apply a gentle Fade animation (800ms)
• Individual Slides: Use Slide Right when they become active
• Navigation Arrows: Fade Up with a slight delay

This combination ensures smooth, professional transitions between testimonials.

4. Statistics Section

Make your numbers pop with attention-grabbing animations:

• Section Container: Subtle Fade effect (600ms)
• First Number: Zoom In with 100ms delay
• Second Number: Zoom In with 200ms delay
• Third Number: Zoom In with 300ms delay
• Fourth Number: Zoom In with 400ms delay

The sequential zoom creates an impactful reveal of your statistics.

Troubleshooting

Animation Not Working

Issue	Possible Cause	Solution
No animation visible	Animation type not selected	Select an animation type from dropdown
Animation happens too early	Offset settings	Adjust AOS offset in theme settings
Animation only works once	“Once” setting enabled	Toggle “Once” setting to false
Choppy animation	Performance issues	Reduce number of animated elements
Animation cut off	Overflow hidden on parent	Check parent container CSS

Performance Best Practices

1. Too Many Animations
   • Limit to 5-7 animations per viewport
   • Use simpler animations (fade vs flip)
   • Increase delays between animations
2. Mobile Performance
   • Consider disabling on mobile
   • Use only fade animations
   • Reduce animation duration
3. Large Images
   • Optimize images before animating
   • Use lazy loading
   • Consider placeholder animations

Conflicts with Other Plugins

If animations aren’t working properly:

• Try deactivating other plugins one by one to find conflicts
• Check if your theme has its own animation system
• Clear all caches after making changes
• Contact support if issues persist

FAQ

Q: Can I animate non-Spectra blocks? 
A: The animation extension works with Spectra blocks, and also with Core WordPress blocks. Other plugin blocks cannot use this feature.

Q: Do animations work in all browsers? 
A: Yes, animations work in all modern browsers. If you’re using an older browser, content will appear normally without animations.

Q: Can I create custom animation types? 
A: The 20+ built-in animations cover most needs. Custom animations may be available in Spectra Pro in the future.

Q: How do animations affect SEO? 
A: Animations don’t affect SEO as content is fully rendered in the HTML. Search engines see the complete content.

Q: Can I disable animations globally? 
A: Yes, animations can be disabled site-wide through Spectra global settings or by not loading the extension.

Q: Do animations work with caching plugins? 
A: Yes, animations work perfectly with all caching plugins.

Q: What’s the difference between free and Pro animation features? 
A: The free version includes 20+ animation types and basic controls (animation type selection, once/repeated toggle, and preview). Pro adds advanced timing controls (duration, delay, easing) and the ability to play animations repeatedly on scroll for more sophisticated, professional animations.

Q: Can I upgrade from free to Pro animations? 
A: Yes! When you upgrade to Spectra Pro, all your existing animations will continue working, and you’ll gain access to the advanced timing and easing controls for enhanced customization.

Q: Do Pro animation features affect page performance? 
A: No, Pro features don’t add any performance overhead. The animation system is optimized regardless of which features you use, and you have more control to optimize animations for better performance.

Browser Support

Animations work with all modern browsers including:

• Chrome
• Firefox
• Safari
• Edge
• Opera
• Mobile browsers

Accessibility

The Animations Extension is designed with accessibility in mind:

• Respects visitor preferences for reduced motion
• Content is always accessible, even without animations
• Works perfectly with screen readers
• Keyboard navigation is not affected
• Follows web accessibility guidelines