How to Add Rotational Scrolling Effects to Elements in JupiterX
Want to make your website more interactive and engaging? With JupiterX's Rotation Scrolling Effects, you can set your elements to rotate beautifully as users scroll up or down your page. It is an excellent way to add that extra flair to your website's design. Here's how you can easily set up rotational scrolling effects using JupiterX and Elementor.
Getting Started with Rotational Scrolling Effects
To begin, you need to enable Motion Effects on the element you wish to animate. Follow these steps:
- Select the element you want to apply the scrolling effect to.
- Go to the Advanced tab.
- Locate the Motion Effects section.
Activating Scrolling Effects
Here's what you need to do to activate the rotation effect:
- Turn on Scrolling Effects by sliding the switch to ON.
- Click on the pencil edit icon for Rotate.
- Choose the Direction of rotation: To Left or To Right.
- Adjust the Speed of rotation from 0 (no rotation) to 10 (fastest rotation).
- Set the Viewport options to determine when the effect starts. If you set it between 50 – 100, for example, the effect will commence when the user has scrolled half the height of their screen.
Adjusting Anchor Points and Application Settings
Let's adjust where and how your element will rotate:
- X Anchor Point: Select an option from Left, Center, or Right to set the horizontal rotation point.
- Y Anchor Point: Choose between Top, Center, or Bottom for the vertical rotation point.
- Apply Effects On: Decide whether to apply the scrolling effects to Desktop, Tablet, and/or Mobile devices.
- Effects Relative To: This can be set to Default, Viewport, or Entire Page.
Note: The X & Y Anchor Points settings will define the pivot of your element's rotation. For instance, selecting left-top will cause the element to rotate around the top-left point. While selecting center-center will make it rotate around its center point, much like a spinning wheel.
And there you have it! With these simple steps, you can add a captivating rotational scrolling effect to your website elements. Just remember to preview and adjust the settings as needed to achieve the perfect look for your site.
Feel free to experiment with different effects, speed, and anchor points to create a unique experience for your visitors. Your creativity is the only limit. Happy designing with JupiterX!