How to Add Entrance Animations to Your JupiterX Pages

Entrance animations are a dynamic way to engage your audience as they scroll through your website. With JupiterX, you can easily add such animations to Widgets, Sections, Columns, and Containers. Below is a simple guide on how to incorporate these animations into your page elements.

Adding an Entrance Animation

1. Navigate to the element you want to animate by right-clicking on the Container, Section, Column, or Widget’s handle. This will allow you to start editing the element.
2. Within the edit panel, proceed to the Advanced  tab, and then find the Motion Effects  section.
3. From the Entrance Animation  dropdown menu, select the desired animation effect. You can preview the animation in real-time as you make your selection. Ensure you also choose the appropriate setting for different devices if necessary.

Types of Entrance Animations Available

JupiterX offers a wide array of entrance animations. Here's a glimpse of what you can select:

Fading Animations

• Fade in, Fade in Up, Fade in Down, Fade in Left, Fade in Right

Zooming Animations

• Zoom in, Zoom in Up, Zoom in Down, Zoom in Left, Zoom in Right

Bouncing Animations

• Bounce in, Bounce in Up, Bounce in Down, Bounce in Left, Bounce in Right

Sliding Animations

• Slide in Up, Slide in Down, Slide in Left, Slide in Right

Rotating Animations

• Rotate in, Rotate in Down Left, Rotate in Down Right, Rotate in Up Left, Rotate in Up Right

Attention Seekers

• Bounce, Flash, Pulse, Rubber Band, Shake, Head Shake, Swing, Tada, Wobble, Jello

Light Speed

• Light Speed In

Specials

• Roll In

Respect for User Preferences

We value the comfort of all site visitors, and therefore, JupiterX respects user preferences set to reduce motion. If a user has enabled reduced motion in their device settings, entrance animations will be disabled for them. Here's how users can manage this setting on different devices:

• Mac: Find the option in System Preferences > Accessibility > Display
• iOS: Go to Settings > General > Accessibility  and toggle Reduce Motion
• Windows 10: Access Settings > Ease of Access > Display  and adjust Show Animations in Windows

Troubleshooting Animations in Safari

Occasionally, you may notice issues with entrance animations in Safari, such as:

• Elements disappearing
• Carousel arrows going missing
• Error messages referring to “maximum call stack size exceeded”

To fix these issues, try to:

• Remove entrance animations from widgets that have both scrolling and mouse effects activated at the same time.
• Avoid using entrance animations in conjunction with mouse track effects in Safari.

Feel free to experiment with different animations to find the best fit for your website. With JupiterX, you have the creative freedom to build a website that is not only aesthetically pleasing but also fun and interactive for your visitors.