Introducing Motion Effects: Powerful Animations to Bring Your Site to Life

Elementor Pro v2.5 unleashes Motion Effects: a powerful toolset for creating amazing scrolling & mouse animations, including sophisticated parallax effects.

Take a ride to animation nation and experience the simplest process for bringing life to your website.

We are now introducing a whole new approach to website animations!

Meet Motion Effects: a powerful set of controls for adding beautiful transitions and animations to your design.

Elementor Pro 2.5 now offers an all-in-one solution for creating:

Until now, web designers who wanted to incorporate animations and motion effects needed to either use bulky external libraries or custom code. As you will see, Motion Effects will give you unparalleled capabilities to apply your creative vision to design unique animated websites. 

How It Works

Elementor’s Motion Effects are easy to use, and beautiful to watch.

Want to animate a whole section, column or widget?
Go to the Advanced tab, and then open the Motion Effects control.

Want to animate a certain background image?
Go to the Style tab, and under Background > Image, you will see the Scrolling and Mouse Effects.

Motion Effects include two sets of unique features: Scrolling Effects and Mouse Effects.

Scrolling Effects

Use Scrolling Effects to create amazing animations and interactions when the user scrolls through the page. 

Vertical Scroll (Classic Parallax Effect)

This is the classic parallax effect you’ve been waiting for. Vertical scroll makes the element move at a different speed than the page while scrolling in the direction and speed of your choosing.

After you set vertical scroll, the effect will start when visitors start scrolling, and end when they exit the viewport.

The viewport value is calculated according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position.

Horizontal Scroll

Horizontal scroll, much like Vertical scroll, makes the element move at a different speed than the page when scrolling. The difference is the element moves left or right instead of up or down.

Pro tip: Combine both horizontal and vertical scroll to further animate any element and create diagonal motion.

Transparency

Transparency lets you gradually make elements more transparent or more opaque in correlation to the visitor’s scroll. An example is having a title appear and then dissolve in accordance with the scroll.

There are 4 possible effect directions:

  • Fade in – Meaning the element starts transparent and gradually becomes opaque.
  • Fade out – The element starts opaqueand gradually becomes transparent.
  • Fade out in – The element starts opaque, then fades out becoming transparent, then becomes opaque again.
  • Fade in out – The element starts transparent, then becomes opaque, then transparent again.

Blur

This setting is similar to Transparency, only instead of transparency, the element becomes blurred. A good example is background images that get proper focus only when the user scrolls down.

There are 4 possible effect directions:

  • Fade in – Meaning the element starts blurry and gradually becomes focused.
  • Fade out – The element starts in focus and gradually becomes blurry.
  • Fade out in – The element starts in focus, then fades out to become blurry, then becomes infocus again.
  • Fade in out – The element starts blurry, then becomes focused, then blurry again.

Rotate

With Rotate animation, the element rotates as you scroll. You can set the rotation’s direction either clockwise or counterclockwise, and also determine the speed of the rotation.

When you switch on the ‘Rotate’ or ‘Scale’ effects, two new controls appear: X & Y anchor points. The two settings determine the axis around which the element scales or rotates, as seen in this diagram:

For example, if you set orientation left-top, the rotation will happen around the left-top point of the element. If you set orientation ‘center-center’, the rotation will rotate around its center, like a wheel. This setting is relevant only to the above ‘Rotate’ effect as well as the ‘Scale’ effect listed below.

Scale

The Scale scroll effect lets you grow and shrink elements according to scroll. Example: A background that grows while scrolling down and shrinks when scrolling up.

There are 4 possible effect directions:

  • Scale Up – The element starts small and gradually becomes larger.
  • Scale Down – The element starts large and gradually becomes smaller.
  • Scale Down Up – The element starts large, then becomes smaller and then grows again.
  • Scale Up Down – The element starts small, then becomes larger and then shrinks again.

Can I apply Motion Effects on desktop and not mobile? Yes! Use the ‘Apply effects on’ to determine if motion effects are applied on mobile, desktop or tablet. Mouse effects will only affect desktop devices.

Mouse Effects

Mouse Track

Create a sense of depth by making elements move in relation to the visitor’s mouse movement.

Once you switch mouse track on, the element will react and move right, left, up or down in accordance to the cursor. Set the direction as opposite or direct to the mouse move, and increase the level of the effect by raising the speed scale.

3D Tilt

Similarly to how Mouse Track moves the element in relation to the mouse movement, the 3D Tilt effect tilts the element according to the same movement of the cursor. This effect offers a neat new perspective when added to different elements, especially images.

3 Vital Things You Should Know About Motion Effects

1.Library Built From the Ground Up. In order to add animations, most websites and plugins simply strap on several external developed libraries to achieve different effects.

To prevent redundant code, and reduce the chance of conflicts, the entire Motion Effects library has been built from scratch by our team. This way, Motion Effect have the smallest impact possible on page load time and performance.

2. Responsive Scrolling Effects. All Scrolling Effects also work on mobile devices. You also have a switch to determine if the effects apply on mobile, tablet or desktop devices. Mouse effect won’t work in tablet and mobile. The effects also work across all browsers consistently. 

3. Improved UX. There are endless ways to implement these animations in everyday web design. For example, shrinking the logo on sticky header, or designing a unique single post template with an animated featured image. The effects are not only beautiful, they have the potential to considerably improve the user experience of your website.

We have a Motion Effects webinar scheduled for tomorrow, and many other creative tutorials coming soon, so be sure to follow our YouTube channel to get updated.

We believe that web design cannot remain flat and static. Motion Effects empower you to use your own creative vision to create never-before seen interactive websites.

Now For Your Homework Assignment... 👩🏼‍🏫

Please create your own scrolling effect, and share it in the comments below.
I’d love to see what you come up with!

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

145 Responses

      1. You okay?

        It’s possible English isn’t their first language, and they weren’t being demanding. It’s not unreasonable to check and see if there’s something pre-fab to look at to see how it was put together in order to make more informed choices when he or she goes to do it themselves.

  1. …and just like that, I say “Good Bye Slider Revolution, good luck in all your future endeavours — row, row, row your bloat, gently down the stream…”.

    Thank you Ben and your team. Excellent work, as usual.

    1. What is the best practice for sliders currently? I am using a template to load each slide as a template, but it does not match the usability of Slider Revolution in my opinion…albeit much more better performance. I am also curious how they achieved the dual font color effect on the first content example above.

    2. You’re completely right. When I get home after work today I’m going to uninstall slider Revolution and use motion effects. Love it. Thank you guys for creating such an AMAZING feature!! I’m very happy!

    3. Carl I was thinking that same thing! Slider Revolution never felt intuitive to me, I’m so happy to see this addition.

  2. Great features, quality code, frequent releases/update and clear communication.

    Elementor is not only the top WP editor, but a model of what a new century company should be.

    Outstanding

  3. Does Anyone know how to do that color effect of the headline “NEW DIRECTION” in the Horizontal Scroll Effekt?

  4. I love it but please, also look into a basic masonry gallery! I know so many people are waiting to make this simple feature come to elementor without having to depend on third-party add-ons!

  5. Waooo I already have to make a site that just required these features. Great work, great company, every time they surprise us more and more. Congratulations to all those who make up Elementor. Is this feature already available? Because it does not appear to me in my version of Elementor

  6. Awesome, and I appreciate that you always have page load time and performance as a priority when developing Elementor features. Very nice!

  7. Great thing. Elementor is constantly improving with every update.
    I miss even better settings for forms, you can certainly better, starts and baffles me again. Best regards

  8. I love everything that Elementor is adding but I don’t need every element on every site. Will we ever get the ability to disable elements we don’t need?

  9. I cant get a single effect to work. Does the underlying theme have an impact? I tried a simple blur on a title and nothing. Do you have an actual help document?

  10. I just want to make my logo slowly hover up and down, is that possible?

    Noticing a huge performance hit with Elementor canvas using it the past year. I want a site’s DOMContentLoaded in under 1.5 sec. Is that possible with an Elementor site? Happy to see some lightweight Elementor themes if anyone can share, I saw Hestia but that feels too heavy to load and render.

    Almost migrating to Beaver Builder for its lightweightness and ultra fast editor. I saw a demo here recently at a WordPress Sydney Meetup! (Elementor was previewed too).

    BB demo: https://www.facebook.com/Siteroo/videos/1985118421616811/

    Elementor demo: https://www.facebook.com/Siteroo/videos/2409365739294291/

    1. I find BB to be way slower than E, so YMMV. There might be other factors at play if you’re getting slow load times. Try optimizing your site first.

    2. I strongly recommend Page Builder Framework. The free version is very good but the pro version adds unbelievable typography customization. Was able to cut my external CSS sheet way down. You can set font-family, size, style and color for body text and every heading individually. Custom fonts are also supported as well as Typekit. It’s a lean, fast theme.

  11. Very nice.
    Elementor seems to focus A LOT on design. Which is good. I just wish some features like ‘TABLES’, table of content and simple modules like Circle progress or more schema structured data (only exists for star module if I am correct) be higher on your priority list.
    Dont get me wrong. I Like Elementor A LOT. I work with it everyday. But I am not sure that the last updates mainly focused on special design are the most useful features for a daily use.
    Great job anyway

    1. I agree completely. Design features are nice but some basic features as mentioned above and also external image links to a push CDN, etc. are needed more.

      Please don’t become like Elegant Themes with a bunch of design frills while they still haven’t gotten the theme builder that they have been promising for well over a year now.

  12. With elements moving around on the screen wouldn’t it be perfect if we finally can switch between 5 different custom breakpoints so the page looks great on every device in landscape and portrait?

  13. This is a great update, but unless I am missing something, I still cannot add the most basic parallax effect of all, which is a parallax section background (without impacting the columns or elements within that section). The closest thing we’ve got is the “fixed” image scroll setting, which is not parallax. Correct me if I am wrong. Again though, great update.

  14. Like always, every feature comes with bunch of 1,000 other different options and settings.
    You are AMAZING! Takes everything we know about building website to the next level.

    Just… Ii will be perfect if a 3D Tilt object will come back to it’s original place when the mouse get out of the screen.

    Take you, Elementor guys!

  15. Wow guys, you bring for wordpress what Apple brought to Cellphones. As far as you follow in this direction you will stay by far the best on the market : a symbol of quality and reliability.
    The experience with Virtual composer was really painful, but it is a delight with Elementor !
    This is the step where very happy customers turn into your best evangelist ! 😉
    Keep it up guys and thanks for everything ! 😉

  16. I think the effects are really awesome but I’d love to learn how to navigate it while taking into account accessibility and making sure the animations I use don’t detract from some users’ experiences. For those with motion sensitivity and various vestibular disorders, animations can be more than a mild annoyance. They can make them physically ill. Personally, I love how cutting edge and cool they are, but I’d advocate strongly for incorporating a means to allow users to “turn off” or on these animations based on a user’s needs. Could we please incorporate some kind of control there? It would be amazing as it would really help us leverage these effects while making it simple for some users who may struggle with them to opt out.

    Generally speaking, I feel a constant pull between my cutting edge approach and my values of inclusivity and my strong desire to build a more accessible web. I don’t have the answers, but here’s a (somewhat outdated) article that made me think: https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity

    I would love if Elementor incorporated some controls to let users choose if they’d like to embrace or opt out of motion effects and animations altogether. For now, I’m keeping my use of animations subtle until there are better controls established to give users choice.

    I hope to see that in a future release. Thank you & keep up the awesome work! 🙂

  17. ha, ha, ha, so much fun! here’s my first use of motion effects. too much?

    https://plumamazing.com/product/iclock/

    instead of ‘3. Vital Points About Motion Effects’ add one super colossal essential vital point.

    the final and most important point could be: 4. Don’t overdo it!

    fun, fast, easy to use, perhaps a little too easy to get carried away. 😎 great work!

  18. Good job Ben and to your team, I’m a proud pro user of elementor. You always feel me excited each time you sent me an email that’s why I love you guys co’z you’re always innovating.

  19. Looks like it could be a lot of fun designing! Didn’t expect it should work on mobile. If I ever find time, I look forward to trying to add something simple to my site update.

  20. May I ask, if there is any online demo of the feature? Just curious about testing cross-browser and mobile support. Thanks in advance.

  21. I checked it in Microsoft Explorer. It works great in Chrome. But the motion effects didn’t work at all. Is there any method to fix that?

  22. Love Elementor, been using pro unlimited since September. Can you make the demo pages in the video available for pro customers. If I could match elements for the two examples it would be perfect for a client I have. He already has space and sea theme I design for him going already. I bet he would be happy if I could incorporate the above into theme I made for him already.

  23. These look great! One question: I have Pro, and I don’t see these options come up within the Motion Effects panel on any of my widgets. Is there something I have to do to activate these new effects?

  24. Ive updated Elementor pro but i don’t see these new features in my panel. I have also installed Elementor extras. Could this plug in be conflicting with Elementor pro?

  25. Check out WP Offload Media from @dliciousbrains. It looks great and I love their WP Migrate DB Pro.

    I also agree about Elegant Themes. They seem to be more preoccupied with blog posts about procrastination and the like.

  26. I am not building video games.
    /
    I am building web sites where users can easily and clearly understand what i want to tell them, and easily find what they want to see, Movement is distracting.
    /
    Spend your time building a flexible multi-field search engine and a way to display the results, rather than more gimmicks.

  27. Animations make websites look amazing but the major issue is they make the website heavy, especially adding flash animations. I would request you to please add another video on how to optimize animations so that animations load flawlessly and website loading time remains low.

  28. Some nice effects, I have to agree. However, I fear Elementor becomes a tool with too many bells and whistles you don’t need on every website.
    What about a more modular approach where you can turn on/off these additions?

  29. This…is very true…

    Good bye 3rd party slider plugins, I used to have good time with you before (just for these effects).

    And now thank you elementor, less plugins that I have it installed right now.

    Can’t wait for any tutorials for inspirations!

  30. I am ever so sorry for being a tad simple, but please can someone tell me how and where to find motion effects. I looked under the widgets in elementor – nothing there. do i download it as another plug in? Where is it exactly? I’m confused as this isn’t explained in the video

    1. It’s okay. I found it. not a widget after all. If you have a header or an image its under the advanced settings

  31. I don’t know why the Scollin Effect doesn’t appear in the tabs? I’m already I Elementor 2.5.14, but I don’t see any effect of scrolling in Motion Effects 🙁

    Its a feature exclusively for Elementor Pro?

  32. I am an Adobe Animate lover and I used Adobe Muse to control my html5 canvas animations … I could control the way my animation was re-produced with the browser scroll … is there something like that? Can you take an .oam file (is the html file encapsulated that generates animate) and control its reproduction? … Can you trace a path where my image or animation would move? I know it’s too much to ask but that would be great …

  33. Really good job with Motion Effects.
    A thing I would love to see is a perspective, just like 3D Tilts, but frozen (no mouse tracking).

    BTW, thanks for all the work done, amazing job. 🙂

  34. Dope blog post! I love that you organized some of these animations I’ve been looking for by giving them a name so I can have more ideas for how I want to design my page.

    Im wondering if you guys have a demo site that I can check this out at so I can compare to the DIVI builder. Maybe make one if it doesn’t already exist?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 760,658 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.