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

Mouse and Float Effects for Elementor Pro

3D tilt, pointer movement and floating animation for any element

Overview

What Mouse and Float Effects does

Mouse and Float Effects adds three small motion effects to any widget, container, section or column. The element can tilt in 3D toward the pointer, shift as the pointer moves across the screen, and float gently by itself. Each effect has its own switch, so you can use one or combine them.

Live demo

See it in action

Move the pointer over this heading

Features

What it can do

  • 3D tilt on hover with a strongest angle from 1 to 35 degrees.

  • Depth setting for the 3D view and a grow on hover amount of up to 20 percent.

  • Follow the Pointer: the element shifts up to 150 px as the pointer moves across the screen.

  • Negative shift values move the element away from the pointer.

  • Floating animation in three directions: up and down, side to side, or a gentle swing.

  • Float distance, cycle time and start delay controls.

  • The floating animation is CSS only.

Use cases

When to use it

Tilting cards

Add 3D Tilt on Hover to pricing or feature cards so they lean toward the pointer.

Layered depth

Give images in a hero different Farthest Shift (px) values so they move by different amounts.

Floating illustration

Let an icon or image float up and down next to a headline.

Offbeat floats

Give several floating shapes different Start Delay (seconds) values so they do not move together.

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: Mouse and Float Effects.

  2. For a tilt, switch on 3D Tilt on Hover and set Strongest Tilt (degrees), Depth (px) and Grow on Hover (percent).

  3. For pointer movement, switch on Follow the Pointer and set Farthest Shift (px).

  4. For a float, switch on Floating Animation and pick a Direction.

  5. Set Distance, One Cycle Takes (seconds) and Start Delay (seconds) for the float.

  6. Preview the page and move the pointer over the element.

FAQ

Questions and answers

Can I use tilt and float on the same element?

Yes. Each of the three effects has its own switch and they can be combined.

Do these effects work on phones?

The floating animation does. Tilt and Follow the Pointer need a mouse or pen, because touch input is ignored.

How do I make layers move by different amounts?

Switch on Follow the Pointer on each layer and give each one a different Farthest Shift (px) value.

Bright Addons Pro

Get Mouse and Float 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.