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
Guide

Mouse and Float Effects Pro

How to set up and style the Mouse and Float Effects extension in Elementor.

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.

Part of: Bright Addons Pro.

Set it up

  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.

Options

These options are in the Advanced tab of the element.

Bright: Mouse and Float Effects

Option What it does
3D Tilt on Hover Tilts the element toward the pointer while the pointer is over it.
Strongest Tilt (degrees) The largest tilt angle, from 1 to 35. The default is 10.
Depth (px) The 3D viewing distance, from 200 to 3000. The default is 900.
Grow on Hover (percent) How much the element grows while tilting, from 0 to 20. The default is 2.
Follow the Pointer The element shifts a little as the pointer moves across the screen.
Farthest Shift (px) The largest shift, from -150 to 150. Negative moves away from the pointer. The default is 20.
Floating Animation A gentle animation that repeats without stopping.
Direction Up and down, Side to side, or Gentle swing.
Distance How far the element floats, from 2 to 60 px.
One Cycle Takes (seconds) The time for one move, from 1 to 30 seconds. The default is 4.
Start Delay (seconds) A wait before the float starts, from 0 to 10 seconds.
Bright Addons Pro

Unlock this and 79 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Tips

  • Do not use Floating Animation together with an entrance animation on the same element.

  • Tilt and Follow the Pointer ignore touch input, so they do not react to fingers on a touch screen.

  • All three effects are switched off for visitors who ask their system for reduced motion.

  • Follow the Pointer reacts to the pointer anywhere on the screen, not only over the element.

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.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides