Shutting Down Notice

I have decided to shut down and discontinue our tutorials and templates.

Sadly, it's just not going to be possible to execute LaunchParty’s long-term vision with the new Elementor 3.0 design system.

Our website will be accessible (but not updated) until November 1, 2020. If you're using our templates, they will still work with Elementor 3.0.

If you have any questions, feel free to contact me.

Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free


By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Add Motion Effects In Elementor

Matthew Averkamp

Tutorial Action Plan

Action Plan

Step 1: Add Motion Effects To Widgets, Columns, and Sections

Elementor Pro is required for this step. Read our Elementor Pro review.

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

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.