I’m sure you know that in Latin, “animation” means “giving life.” And, after all, what can illustrate animation effects’ role for websites more accurately? There are piles of great examples of using them the way it not only looks captivating but creates a great user experience. WordPress is what we love the most here, right? So let’s dive into the topic of great animation ideas and gorgeous websites made using this CMS and, preferably, Elementor builder.
- Animation Effects, Techniques, and Instruments to Mix and Match
- Tools for Creating Website Animations on WordPress
- Pros and Cons of Using Animations on the Website
- FAQ
- Takeaway
Animation Effects, Techniques, and Instruments to Mix and Match
Creative parallax effects
Parallax effect in web design means creating a faux 3D effect. Several objects, which are most often layered on each other, move with a different speed on a scroll or a mouse move, thus giving a sensation of depth. It can work amazingly for product presentations, for example. For the users, it feels like objects can come alive right from their screen, creating an impulse to touch or see them in person.
This effect has been on the market for many years so far; the basic form is parallax backgrounds, and more advanced examples of applications are limited only by the designer’s creativity and skills of a web developer.
The good news is that now you can bring to life almost any idea about the parallax effect if you use WordPress and Elementor. The key is to have a great instrument for implementing it, such as Section Parallax, one of 43 design widgets of the JetElements plugin.
Vertical and horizontal scrolls, scrolling zoom, rotation, transparency, blur, and mouse move parallax types are available. With background-position change, transform, and 3D transform animation properties. Different types of it can be applied to each object individually.
Another piece of good news is that now you can easily use SVG files for your parallax composition, and it will not significantly load the page.
Scroll website animation and navigation
Various types of animation effects (such as moving, fading, morphing, color change, etc.) need a trigger to start being executed. One of the most popular triggers is on-scroll (down or up), commonly referred to as scroll animation.
It is the most popular type because it’s overly logical: showing animated objects when the user has reached them. Probably several million websites use fade-in or slide-in reveal effects on scroll, right? What we are looking for is not a reinvention of the wheel at this point but discovering some great ideas for animations on scroll. The key here is creativity in finding great combinations of even beaten effects and smoothness of them all working together.
Talking about smoothness and scrolling itself: there’s a beautiful effect called locomotive scroll – frictionless scrolling, now available for Elementor pages, too. Another excellent feature to make goods or services presentations stand out is scroll navigation when only one silky-smooth mouse wheel/touch is between the screens or blocks.
Preloaders: skeleton screens and spinners
Preloaders are an excellent option for web pages that take some time to load, even if the website performance is actually good: for image-heavy webpages, for example. They give visitors a feeling of a well-working website and excitement about the content (if preloaders are cool, obviously). Also, users start interacting with the webpage immediately, and if the brand identity is in that preloader – then with your brand too.
Skeleton screens are a more practical type of preloader. They are basically prototype-like previews of the content that will load, used chiefly on websites with plenty of elements (e.g., YouTube) and dashboards. There is not so much space for creativity, but anything is possible.
For now, let’s have a look at the cool preloader based on the brand identity:
Animated cursors and mouse interactions
This kind of animation creates an emotional connection with users and keeps them engaged for a longer time. Consequently, they will remember your website longer. Isn’t it what we all are looking for? There’s only one little thing about it: this effect is appropriate for only a small number of websites, mostly some creative projects. Even little cursor animation can be distracting and annoying in many cases.
In the example below, it’s not only appropriate but also adds gamification to navigation menus:
And the following website uses an animated cursor and magnetic mouse effects to spice up the whole scrolling and reading experience:
But there’s one thing about such websites like in the examples above: they are heavy, no matter how hard you try, and they are suitable only for a narrow niche. At the same time, most websites need something simpler, more lightweight, yet able to amuse the visitor. So what alternatives are there, particularly for Elementor?
Many underestimate the range of possibilities particle effect possesses. There can be a limitless number of color-shape-type-speed combinations: check them here and play with them. And use a widget to paste the generated code right to your Elementor container. Visitors will enjoy interacting with it, for sure.
Adding some little animation on-hover effects on the navigation bars, buttons, or critical page elements would be a fantastic idea, like those dropbars, which can contain important messages or even a contact form.
Morphing and smooth transitions
Morphing is the effect of the seamless and smooth transformation of one object into another. It looks fascinating and draws attention but also gives the feeling that the website is well-conceived and designed with a hint of sophistication. Anything, from illustrations, logos, and even photos, can be morphed, but the key is to balance the number of objects and the intensity.
Smooth transitions are also a great option while they don’t create the feeling that the website is slow.
Content reveal with WOW-effect
They say, if people make even small efforts to get something, they appreciate it more and remember it longer. So it’s a good idea to let website visitors enjoy some interactive content and engage them more.
Obviously, most animations need some action from the user (scrolling, hovering, clicking), but without them, the website will not lose its wholeness, and users will not miss important information. But some require the user’s action: he/she must do something to get promo codes, bonuses, know important details, etc. For example, look at these scratch, pull, and peel effects at the Animated Box widget.
Drawing with texts and telling stories
What new can be said about text animations and hover effects? Well, there are web designers who rethought those “ordinary” elements and got great results. Deconstructed letters, hotspots for hovers in the middle of the text, simple but various reveal effects – and, voila, you have it. Look at this example:
And again, what’s new can be offered for the Team section design? Not another slider in the example below, by good fortune. The whole website design concept is built on typography and suddenly reveals team member photos on their names hover.
Tools for Creating Website Animations on WordPress
There are plenty of libraries, techniques, and plugins available. Let’s talk about three instruments that, in my opinion, offer the most extensive flexibility and the most options while almost don’t affect website speed and are perfectly suitable for WordPress.
Lottie animations
Lottie is a relatively new library that makes it possible to render even quite complicated animations on the web and any application. It’s cross-platform, lightweight, and scalable, so there’s no risk of pixelation or having performance issues.
There are three primary ways of creating or getting Lottie files:
Go to LottieFiles.com.
And choose among hundreds of free animated icons and illustrations, download them and use them on your website. There’s also a marketplace of more advanced paid assets. And if your task is even more specific, hiring a professional is also available on this website.
Create your own SVG file you want to animate.
Upload it to the SVG-to-Lottie convertor on the same website and apply some simple animation effects it offers. For more options, upload your Lottie file (JSON format) to the online editor and make all the tweaks you want. Download the ready Lottie file and enjoy.
Complicated animations.
To create more complicated animations, use After Effects and a free Bodymoving extension for it to export the result in Lottie format. Or check an open-source software called Haiku instead of After Effects. When your file is ready, don’t forget to check it for compatibility with all platforms here.
When the icon or artwork is prepared, it’s time to use it. To do it on WordPress with Elementor page builder is easier than it seems: simply install JetElements and click on the Lottie Files widget. What’s nice is that it’s possible to adjust speed, rendering type, and looping right in the widget settings. Combining various Lottie files, you can create stunning animations; the only limit is the depth and width of your flight of fancy.
CSS animations
If you are on the “team CSS” and getting excited by the often-overlooked potential of what CSS can do, this way is perfect for you. All over the Internet, you can find a lot of inspiring examples of what you can do using CSS only. And this is an excellent instrument if you need a specific effect for a particular object. One of the most significant advantages is that no extra libraries need to be enqueued on load; it’s just a lightweight little piece of code. Unlike JavaScript, CSS animations avoid browser compatibility issues.
Look at this website and the amazing things one can do with CSS polygons.
WordPress plugins with many animation options
One frustrating thing for me about Elementor plugins and add-ons with animation effect widgets: they often miss something, which would be very good to have in the bundle. Hotspots, parallax, or portfolio widgets are omitted in so many plugins, yet they can be very useful.
So you have to install a few similar plugins to get those several widgets you really need. We all know that one more plugin (especially for animation, with its exorbitant JS libraries, which also can conflict) means a decrease in site loading speed. For example, with the JetElements and JetTricks plugins duo, you’ll get the whole 53 widgets to bring the broadest range of effects to life.
Pros and Cons of Using Animations on the Website
To begin with, let’s sift the wheat from the chaff and clarify what kind of animation we are talking about. When considering whether to use some effects, I don’t count little hoverable drop-down menus or simple paragraph fade-ins. I’m talking about something more shouting “animation is here” situations.
When to use animation?
There are plenty of reasons to add animations, and let me put only some of the reasons:
- animation engages users, and they spend more time on the website, which is good not only for them to get more acquainted with the products but also for SEO;
- it makes the website be perceived as alive, creating an emotional connection;
- it creates associations and helps the visitor to remember the brand longer;
- it helps to draw attention to important CTAs;
- it improves the overall user experience, ads gamification and smoothes the process of perceiving information.
So, I guess there is no doubt that website animation is essential. The question is what kind of animation effects to use, how complex they should be, and how they can influence the website performance.
When not to use animation?
There are four major cases when animation can become a problem:
- if the website is already heavily loaded with pictures and other objects that make it load longer, adding some big animations will be a bad idea;
- non-optimized animations that significantly decrease the loading speed;
- too intricate and conceptual, turning the user experience into a challenge;
- when extensive animations are incongruous with your niche or brand identity.
FAQ
Does animation slow down web pages?
It depends on the technologies used for animation, animation types, and whether it was implemented correctly, taking into account optimization requirements. In a nutshell, do not overload with unnecessary motions and unneeded JS frameworks, use CSS preprocessors, be mindful with JavaScript, and make important content available even with the low bandwidth and JS turned off. Yes, and the sacred commandment for any website: mobile-first.
Are animations and transitions effects good for UX?
Using too many fragmented eye-catching animations here and there makes the visitors get lost. It’s better to emphasize something you want users to focus on. The universal UX rule must be applied here: good user experience is priority #1, not the designer’s idea to look fabulous on Behance or be fancy and use all the effects they personally like.
Are animated preloaders good for the website?
Yes, if they are well-executed. They give a visual signal to users that the website works properly (even if its optimization is not perfect in reality) and keep them engaged from the first second of contact with the website.
What is CSS animation?
As CSS means “cascading style sheets,” appointing particular styles for elements in HTLM, so CSS animation is basically a transition between one style to another, and all the properties of that style can be changed if needed. The process is keyframes-based, and the developer can control not only point A and point B of the transition but every step of the way. CSS animation is considered one of the most optimization-friendly ways to create simple animations and visual effects if implemented well.
What is easing property?
Easing adds acceleration or deceleration to the speed of any animation motion, between starting and ending values, so its speed will not be linear (and dull). It’s perfect for making any effects feel “alive.”
Takeaway
The time of static sites is long gone, and designers are constantly looking for new ways to make the web world exciting and draw attention to their works. Nothing around us is still; everything in nature is moving all the time, appears with ease, and has some kind of transition effects, so to say. That’s why seeing animation effects feels so organic for us and enlivens still objects.
At the same time, the golden rules of web design and web development should always be applied: everything must be relevant, optimized, well thought out, and implemented.
