Motion Effects

Introduction

Bring your website to life with interactive animations that respond to mouse movement and scrolling. Create engaging, professional motion effects without writing any code.

Quick Demo Video

Getting Started

What Are Motion Effects?

Motion Effects add smooth, interactive animations to your blocks. Elements can follow your cursor, tilt in 3D space, or animate as you scroll down the page – creating a modern, engaging experience for your visitors.

Perfect for:

• Hero sections – Eye-catching animations that grab attention
• Product showcases – Interactive 3D effects that highlight features
• Storytelling pages – Elements that animate as users scroll through content
• Portfolio sites – Professional parallax and scroll effects
• And many more – Add motion effects anywhere you need engaging animations

What You Can Animate

Mouse Effects

Elements react to your cursor in real-time:

• Mouse Tracking – Blocks follow your cursor movement
• 3D Tilt – Elements tilt and rotate as you hover over them

Scroll Effects

Elements animate as you scroll the page:

• Movement – Blocks move horizontally or vertically while scrolling
• Fade – Elements fade in or out based on scroll position
• Blur – Create dynamic focus effects while scrolling
• Scale – Elements grow or shrink as they enter the viewport
• Rotation – Blocks rotate smoothly during scroll

Which Blocks Can Use Motion Effects?

Good news: Almost all of them!

Motion Effects Work With:

• All Spectra blocks – Container, Text, Image, Button, and more
• Spectra Pro blocks – Loop Builder, Login, Register
• Some WordPress core blocks – Currently Image block

Motion Effects Don’t Work With:

• Popup Builder block – Motion effects are disabled for popups

💡 Quick Tip: If you don’t see the Motion Effects panel in your block settings, that block doesn’t support motion effects yet.

Simple Terms Explained

New to animation? Here’s what these words mean:

• Parallax = When background images move slower than foreground content, creating a 3D depth illusion
• Viewport = The visible area of your browser window (what you can see without scrolling)
• Intensity = How strong or noticeable the effect is (higher = more dramatic)
• Perspective = How “3D” something looks (controls depth perception)
• Transform Origin = The point around which an element rotates or scales (like a pivot point)
• Invert = Reverse the direction of movement

Don’t worry if these seem confusing – you don’t need to understand them to use motion effects! Just follow the examples below.

Mouse Effects – Make Elements Follow Your Cursor

What it does: Creates interactive animations that respond to mouse movement. Perfect for adding depth and engagement to hero sections and featured content.

Note: Mouse effects only work on desktop devices (they automatically turn off on tablets and phones).

Mouse Tracking

⚠️ First time? Just turn it ON and leave all settings at default. It will look great! Only adjust settings if you want to fine-tune the effect.

Step 1: Select any block you want to animate Step 2: In the right sidebar, scroll to Motion Effects panel Step 3: Toggle Mouse Effects → ON Step 4: Toggle Mouse Tracking → ON (enabled by default) Step 5: Adjust the settings:

Settings Explained:

Direction

• Free – Block moves in all directions following cursor
• Horizontal – Block only moves left and right
• Vertical – Block only moves up and down

Speed (0.1 to 10)

• Low (1-3) – Subtle, professional movement
• Medium (4-6) – Noticeable interactive feel
• High (7-10) – Dramatic, attention-grabbing motion

Invert

• OFF – Block follows cursor
• ON – Block moves opposite to cursor (creates unique effects!)

Offset (-150 to 150)

• Adjusts starting position before any movement
• Negative – Starts to the left/top
• Positive – Starts to the right/bottom

💡 Pro Tip: Start with Speed = 3 and Direction = Free for most use cases. It provides a nice balance between subtle and noticeable.

3D Tilt Effect

Step 1: Select your block Step 2: Toggle Mouse Effects → ON Step 3: Toggle 3D Tilt → ON Step 4: Customize the effect:

Settings Explained:

Intensity (0 to 360 degrees)

• 15-45° – Subtle, professional tilt
• 45-90° – Noticeable 3D effect
• 90°+ – Dramatic, attention-grabbing rotation

Perspective (0 to 1000)

• Lower values (0-500) – More dramatic 3D depth
• Higher values (500-1000) – Subtle, natural 3D effect
• Recommended: 1000 for most designs

Face Towards Cursor

• ON – Block tilts toward where you point
• OFF – Block tilts away from cursor

Glare

• ON – Adds shiny light reflection that moves with cursor
• OFF – No light effect
• Great for: Cards, product images, call-to-action boxes

💡 Pro Tip: For cards and product showcases, try Intensity = 25, Perspective = 1000, Face Towards Cursor = ON, Glare = ON for a premium look!

Quick Examples:

Floating Logo:

• Mouse Tracking: ON
• Direction: Free
• Speed: 2
• Result: Logo gently follows cursor

Interactive Product Card:

• 3D Tilt: ON
• Intensity: 35
• Glare: ON
• Result: Card tilts toward cursor with shiny reflection

Scroll Effects – Animate as You Scroll

What it does: Creates smooth animations tied to scroll position. Elements move, fade, blur, scale, or rotate as visitors scroll down your page.

⚠️ Beginner Tip: Start with just Fade or Scale effects. They’re the easiest and most popular! You can always add more effects later.

How to Set Up Scroll Effects

Step 1: Select any block 
Step 2: Open Motion Effects panel in sidebar 
Step 3: Toggle Scroll Effects → ON 
Step 4: Choose which effects to enable

Available Scroll Effects

1. Horizontal Scroll (Parallax)

What it does: Moves blocks left or right as you scroll down the page.

Great for: Layered parallax effects, backgrounds moving slower than content

Settings:

Scroll Speed (1 to 10)

• 1-3 – Slow, subtle movement
• 4-7 – Moderate parallax effect
• 8-10 – Fast, dramatic movement

Invert

• OFF – Moves right as you scroll down
• ON – Moves left as you scroll down

Animation Start (%) – When the effect begins (0-100%)

• 0% – Starts when element appears at bottom of screen
• 50% – Starts when element is halfway up the screen
• 100% – Starts when element reaches top of screen

Animation End (%) – When the effect completes (0-100%)

💡 Pro Tip: Set Start = 20% and End = 80% for smooth animations that begin and end within the viewport.

2. Vertical Scroll

What it does: Moves blocks up or down independent of normal scroll (parallax effect).

Great for: Background elements, floating objects, multi-layer designs

Settings:

• Same as Horizontal Scroll above
• Invert OFF – Moves down as you scroll
• Invert ON – Moves up as you scroll

3. Fade Effect

What it does: Changes opacity while scrolling – makes elements appear or disappear smoothly.

Settings:

Fade Intensity (0.1 to 10)

• 1-3 – Subtle fade
• 4-7 – Moderate transition
• 8-10 – Dramatic appear/disappear

Fade Direction:

• Fade In – Element appears as you scroll (transparent → opaque)
• Fade Out – Element disappears as you scroll (opaque → transparent)
• Fade Out In – Fades out, then back in (opaque → transparent → opaque)
• Fade In Out – Fades in, then back out (transparent → opaque → transparent)

Viewport Start/End (0-100%)

• Controls when effect starts and stops

💡 Pro Tip: Use “Fade In” with Start = 0%, End = 30% to make elements appear as they enter the screen!

4. Blur Effect

What it does: Makes elements blurry or sharp as you scroll – creates focus effects.

Settings:

Blur Intensity (0.1 to 10)

• 1-3 – Subtle blur
• 4-7 – Noticeable focus effect
• 8-10 – Heavy blur

Blur Direction:

• Focus In – Starts blurry, becomes clear as you scroll
• Focus Out – Starts clear, becomes blurry as you scroll
• Focus Out In – Clear → Blurry → Clear
• Focus In Out – Blurry → Clear → Blurry

💡 Pro Tip: Use “Focus In” on backgrounds to draw attention to sharp foreground content!

5. Scale Effect

What it does: Makes elements grow or shrink as you scroll.

Great for: Zoom-in reveals, product showcases, attention-grabbing headlines

Settings:

Scale Intensity (0.1 to 10)

• 1-3 – Subtle size change
• 4-7 – Noticeable zoom effect
• 8-10 – Dramatic scaling

Scale Direction:

• Scale In – Grows larger as you scroll (small → large)
• Scale Out – Shrinks as you scroll (large → small)
• Scale Out In – Large → Small → Large
• Scale In Out – Small → Large → Small

💡 Pro Tip: Use “Scale In” with Start = 0%, End = 50% for elements that zoom in as they appear!

6. Rotation Effect

What it does: Rotates elements as you scroll down the page.

Great for: Icons, badges, decorative elements

Settings:

Rotation Speed (1 to 10)

• 1-3 – Slow rotation
• 4-7 – Moderate spin
• 8-10 – Fast rotation

Invert

• OFF – Rotates clockwise
• ON – Rotates counter-clockwise

💡 Pro Tip: Combine rotation with scale for dynamic icon animations!

Popular Effect Combinations

Want professional results? Try these proven combinations:

“Smooth Appearance”

• Fade In + Scale In (both 0-40%)
• Result: Elements smoothly appear and grow as you scroll to them
• Best for: Headlines, call-to-action buttons

“Cinematic Reveal”

• Fade In + Blur Focus In (both 0-50%)
• Result: Elements come into focus dramatically
• Best for: Hero images, featured content

“Floating Background”

• Vertical Scroll (Speed 2, Inverted)
• Result: Classic parallax effect
• Best for: Background images, hero sections

“Attention Grabber”

• Scale In + Rotation (both 10-60%)
• Result: Elements spin and grow into view
• Best for: Icons, badges, special offers

“Interactive Card”

• Mouse Tracking (Speed 2) + 3D Tilt (Intensity 25)
• Result: Premium hover effect
• Best for: Product cards, portfolio items

💡 Pro Tip: Start with just ONE effect. Once it looks good, add a second effect for extra polish. Don’t use more than 2-3 effects per block!

Transform Origin (Advanced)

When using Scale or Rotation effects, control the anchor point for transformations.

Transform Origin X (Horizontal):

• Left – Transform from left edge
• Center – Transform from center (default)
• Right – Transform from right edge

Transform Origin Y (Vertical):

• Top – Transform from top edge
• Center – Transform from center (default)
• Bottom – Transform from bottom edge

Example: Setting X = Left, Y = Top makes elements scale/rotate from their top-left corner.

Device Visibility

Control which devices show scroll effects (mouse effects are desktop-only automatically).

Desktop – ON/OFF 
Tablet – ON/OFF 
Mobile – ON/OFF

💡 Pro Tip: Turn OFF complex scroll effects on mobile to improve performance and avoid janky animations on slower devices.

Preview Mode – Test Your Effects

Test motion effects directly in the editor before publishing!