BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro extension

Scroll Effects for Elementor Pro

Move, fade, scale, rotate or blur elements on scroll

Overview

What Scroll Effects does

Scroll Effects ties the look of a widget, container, section or column to its way through the screen while the page scrolls. The element can move up, down or sideways, rotate, grow or shrink to its normal size, sharpen from a blur and fade in or out. Use it for parallax layers and content that settles into place as it comes into view.

Live demo

See it in action

This heading moves and fades as you scroll

Features

What it can do

  • Vertical and sideways movement, with values from -300 to 300 px.

  • Rotation from a start angle of up to 360 degrees back to straight.

  • Start size from 20 to 200 percent that grows or shrinks to the normal size.

  • Start blur of up to 30 px that clears as the element moves in.

  • Fade in while entering, fade out while leaving, or both.

  • Size, rotation and blur can finish at the middle or at the top of the screen.

  • Choose the devices. Desktop and tablet are on by default, phones are off.

  • The effect is only worked out while the element is near the screen.

Use cases

When to use it

Parallax image

Give an image a negative Move Up or Down (px) value so it moves against the scroll.

Layered hero

Give several layers different movement values so they drift by different amounts.

Content that settles

Start a card at a smaller size with a blur and let it sharpen as it reaches the middle of the screen.

Soft exits

Use Fade out while leaving so sections dim as they scroll off the top.

Setup

How to set it up

A few steps from adding the extension to a finished result.

  1. Select the element, open the Advanced tab and open the section Bright: Scroll Effects.

  2. Switch on Scroll Effects.

  3. Set Move Up or Down (px) or Move Sideways (px) for movement, and Rotate (degrees) for a turn.

  4. Set Start Size (percent) and Start Blur (px) if the element should grow, shrink or sharpen.

  5. Pick a Fade option and choose where the change ends in Size and Blur Finish At.

  6. Select the screen sizes in Active On, then scroll the page to check the result.

FAQ

Questions and answers

Why does nothing happen on my phone?

Active On includes only Desktop and Tablet by default. Add Phone to run the effects there.

Is this the same as an entrance animation?

No. Scroll Effects follow the scroll position, so they also run backwards when the visitor scrolls back up.

Can I combine several effects on one element?

Yes. Movement, rotation, size, blur and fade can all be set on the same element.

Bright Addons Pro

Get Scroll Effects with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.