To add a dynamic rotate scrolling effect to any Elementor element, such as an image widget, configure its motion effects in the Elementor Editor. This allows the element to spin left or right as users scroll your page, with customizable direction, speed, and viewport settings.
How to Apply Rotate Scrolling Effects in Elementor?
Follow these steps to apply a rotate scrolling effect to an Elementor element, using an image widget as an example:
In the Elementor Editor, locate and Edit the image widget where you want to apply the motion effect. The Edit Image panel will open on the left.
Navigate to Advanced > Motion Effects.
Toggle the Scrolling Effects option to ON.
For the Rotate effect, click the edit icon.
Configure the following settings for the Rotate effect:
Direction: Choose to rotate the element To Left or To Right.
Speed: Adjust the rotation speed using a slider from 0 to
Viewport: Define the scroll range (based on viewport height) during which the effect will be active. For instance, setting the viewport between 50% and 100% means the effect begins after scrolling past half of the visible screen height.
Apply Effects On: Select the devices where the motion effect should be active: Desktop, Tablet, and/or Mobile.
Effects Relative To:
Default: Calculates the effect based on the user’s viewport, measuring the height of the actual presented screen.
Viewport: Calculates the effect based on the user’s viewport, measuring the height of the actual presented screen.
Entire Page: Calculates the effect relative to the total height of the entire page.
Click Publish to save your changes and apply the rotate scrolling effect.