Step 1: Add Motion Effects To Widgets, Columns, and Sections
Complete The Following Tasks
Learn how to add motion effects to widgets, columns, and sections.
Turn on motion effects for a widget, column, or section by going to Advanced > Motion Effects.
Turn on the Scrolling Effects toggle.
Go to Apply Effects On and remove the Tablet and Mobile tags.
I usually remove the Tablet and Mobile tags because some mobile devices won't be able to handle motion effects very smoothly.
Turn on your preferred motion effect (Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate, or Scale). You can combine multiple effects if necessary.
Adjust the Direction settings.
Adjust the Speed (or Level) settings.
Learn how to control your animation by adjusting the Viewport percentages.
The Viewport settings help you control when an animation starts and finishes. The percentage values are based on how far down the screen a user has scrolled. It may take some practice to full understand how these settings work.
When using Scale or Rotate effects, you can adjust the X and Y Anchor Points if necessary.
For example, when using the Scale effect on a video widget, you might want to anchor the effect to the bottom (Y anchor point). This way the video player won't cover any of the content below it when it scales in size.
Keep your motion effects subtle and only add one or two effects (maximum) per page.
Motion effects can become annoying if they prevent your visitors from quickly viewing your content.
For example, if I have to wait for the content to appear in each section as I'm scrolling down the page, it can become annoying. So be sure to keep your effect minimal and use them sparingly.
You Earned A Badge!
Watch Our Video Tutorial
Rate This Video:
Please let us know how we could improve this video.