How to Add Animations in WordPress
1. most popular – GIF
1-1 What is a GIF?
GIF stands for Graphics Interchange Format, and it’s one of the most widely used animation formats.
Much like TV animations, GIFs work by playing a sequence of image frames rapidly to create the illusion of movement. The more frames it contains or the longer the playback duration, the larger the file size will be.
GIFs can be displayed on almost any platform that supports image uploads. Because it’s such a widely adopted format, there’s a vast amount of GIF content readily available online.
1-2. Inserting a GIF into WordPress
Uploading a GIF to WordPress is very simple. It’s exactly the same process as uploading a regular image.
Just use the Image Block and upload a GIF file instead of a standard image — and that’s it!
A complete guide to adding images to the WordPress Cadence theme.zip
If you’ve never uploaded an image before, you can follow the step-by-step guide linked above. It’s easy!
1-3 Free GIF Sharing Sites
Download 8462+ Free Animated GIFs & Stickers – Pixabay
Free Animated GIFs for Commercial Use
Gif Images – Free Download from Freepik
1-4 GIF pros and cons
Pros
– Since it’s the most widely used animation file format, there’s an enormous amount of available resources—even if you don’t create them yourself.
– Compatible with almost any platform that allows image uploads.
Disadvantages
– File size increases with longer durations and higher image quality, which leads to slower loading times.
– Due to file size constraints, you need to keep frame count and resolution low.
– Not suitable for high-quality, smooth animations because of these size limitations.
2. somewhat unfamiliar – roti animation
2-1 Roti Animation
This is an animation format that isn’t commonly used by the general public. It’s mainly utilized by professional designers and companies. While it’s less accessible than GIFs, it offers a more polished and professional quality, which is exactly why experts prefer it.
Lottie is an open-source animation format developed by Airbnb, a company well-known for its accommodation services. It’s based on JSON and uses vector image animations. Although many people may not know it by name, almost everyone has seen a Lottie animation before.
You can find them in countless apps like Toss, KakaoTalk, and Netflix—those smooth and refined animation effects you see are often powered by Lottie. It’s widely adopted by many businesses and software platforms for delivering high-quality animations.
2-2 Strengths of Rotary Animation
Crisp Quality and Resolution That Holds Even When Resized
Lottie animations are vector-based. Most of the standard images you see on digital screens use a bitmap method, where countless tiny pixel fragments form a mosaic-like picture. Since each pixel holds its own data, the larger the image or the higher the resolution, the bigger the file size becomes.
On the other hand, vector graphics use mathematical equations to render images. Instead of assembling pixels like a mosaic, vector graphics define images through mathematical data such as coordinates and angles. When the image is resized, the mathematical data is recalculated accordingly—ensuring that the quality and sharpness remain intact without any pixelation or blurriness.
Because Lottie animations are vector-based, they fully benefit from these advantages, maintaining crisp resolution regardless of scaling.
Small file size
Because vector graphics are based on mathematical equations, as explained above, they are significantly smaller in file size compared to bitmap images. Despite their smaller size, vector graphics offer sharper image quality than bitmap-based formats.
GIF (1,113 kb)
Lottie (63 kb)
Smooth Frame Transitions
To achieve smooth animation with GIFs, you need a high number of closely spaced frames. However, more frames mean a larger file size, so smoother animations come at the cost of bigger files.
Lottie, on the other hand, doesn’t have this limitation. Because it uses vector graphics, a simple command like “move from point A to point B” can create smooth transitions—without needing multiple frames. Thanks to this vector-based approach, Lottie animations can deliver fluid and natural movements with minimal data.
Interactive Capabilities
Unlike GIFs, Lottie animations can respond to user interactions such as scrolling, clicking, or hovering. This makes them far more versatile and dynamic. Instead of being passive, one-way visuals like GIFs, Lottie files allow for interactive animations that enhance the user experience.
How to Create Lottie Animations
There are several ways to create Lottie animations. Here, we will introduce a few of the most common methods.
In all of the methods introduced, the exported file format is JSON!
Adobe AfterEffect
Motion Graphics Software | Adobe After Effects
Adobe After Effects is an animation tool. It is a professional animation software available through a paid subscription. Most of the animation effects you see in TV broadcast intros or YouTube intros are created using After Effects.
Since it is a professional program, it can be difficult for general users to learn and use.
LottieFiles
The Lottie website offers a tool that can be used for free on the web without installation. Compared to After Effects, it is simpler and easier to use.
Phase
Phase – Animation for Product Designers
Pize is a web tool just like the Lottie web tool. It is simpler, easier, and more intuitive, making it the most recommended Lottie animation tool for non-professionals.
A great advantage is that Pize offers basic video tutorials in Korean on their website. Once you understand the principles, you can create simple effects yourself using this tool.
4. Where can I get Lottie animation files?
Although there are ways to create them yourself, most people find it daunting to suddenly handle unfamiliar tools. But don’t worry—just like GIFs, there are sharing sites where you can find Lottie animation files!
If you search in English on the above site and change the search filter to “free,” you will find a variety of Lottie animations available for free use.
Click Download in the top right corner
Click Lottie JSON from the options on the right
This is how you get the free roti animation JSON file.
5. Roti Animation Block
WordPress supports Lottie animations. However, the Lottie animation block is not provided by default in WordPress. If you install the LottieFiles plugin, you can use a block that allows you to upload Lottie animations.
However, if you are using the Kadence theme, there is a Lottie Animation block included in Kadence theme blocks. Kadence’s Lottie Animation block is much more useful and offers more customization options.
Uploading and Setting Up Lottie Animation Block Files
How to upload a JSON file
Block Settings > Remote URL > Local File
Upload a Lottie file
Enter a filename and upload a json file from Browse
Click Selecet Lotiie File, select the json file you just uploaded
Uploading and Setting Up Lottie Animation Block Files
Advanced tab > Max Width > Resize Image
6. Things to Keep in Mind
- Even if the file size of a Lottie animation and an image are the same, the loading speed of the Lottie animation tends to be slower than that of the image.
- When moving the position of a Lottie animation within the WordPress editor page, there is a bug where the animation may not be visible in the editor view. However, it will display correctly once the page is published.
That’s a brief overview of animations in WordPress. While GIFs remain the most popular format, using Lottie animations has many advantages when possible. Lottie animations offer a more professional and sophisticated presentation compared to GIFs, making your site look more polished and high-end.
