Floating Effect Elementor Extension By Master Addons

Master Addons introducing Elementor Floating Effect extension. This extension works in every element. You can add nice floating animation to make any element attractive and eye-catching to the audience. You can take a look at the demo of floating effect.

After adding any element navigate to the advanced tab and scroll down to “floating effects” extension. Enable it and, you will see the following three control. I am explaining in detail on how to use the controller properly. 

  1. Translate Effect Controler
  2. Rotate Effect Controler 
  3. Scale Effect Controlar 

I recommend you to check Elementor Pro features too. Elementor pro and Master Addons combination is enough to create any type of website.

Translate Effect: There is two range slider, one is Translate X and another Translate Y. X is for vertical animation and, Y is for horizontal animation. There is two other option for animation duration and delay. Duration means how long it will take to complete the animation. Perhaps delay means, after how much time the animation will start.

Floating Effect translate animation

Rotate Effect: Like translate, it has all similar options. But it works for Rotation animation. As an extra axis, you will see Rotate Z here. You can set different duration and delay values for this effect too. 

Floating Effect Rotate

Scale Effect: You can resize any elements in a nice animation. All options are the same as the previous effect. You can animate any element size in horizontal or vertical with the help of scale effect.

Floating Effect Scale

Floating Effect Elementor Guideline

I hope you are familiar with the options properly. Let’s create an awesome section with some images. Take a look at the following screenshot. I am going to arrange a section with these images.

floating effect images

First, I have added a section and made it full width. Then inserted an inner column and added a new column. Arranged all images like the following screenshot inside the three columns.

floating effect image arrange

Now, it’s time to work with position and Floating Effect. I prefer the position first. I recommend you, take a look at your design and position all images and particles properly before work with the floating effect. I have used the Master Addons positioning extension to position the images.

Go to position extension select relative. Then align images or any element. I have done positions for all images and attached the following screenshot.

floating effect position for images

Finally, it’s time to apply the floating effect in desired images. I have applied translate X, Y effect in the first column and third colum images. Applied Rotate Z effect in the profile picture only. Take a look at the following Gif file how it looks like.

Floating Animation Effect

That’s all about the Floating effect extension. If you face any problem with this extension, feel free to comment here or contact via the Website contact form.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms