If you're like me and love adding life to websites, Rive is hands-down one of the coolest tools out there. As someone who works with UI animations every day, I can tell you that Rive has totally changed the game—especially when used on platforms like WordPress. Whether you’re designing a modern portfolio, building a product site, or just want your logo to bounce a little, this guide is for you.
Hi, I’m Praneeth Kawya Thathsara, Rive animator and founder of uianimation.com. In this article, I’ll walk you through exactly how to use Rive animations inside WordPress, step-by-step—with no fluff and no complicated dev talk. Let’s jump in!
🎨 What Is Rive?
Rive is a real-time animation tool made for designers and developers. You create animations in the Rive editor, and export them as .riv files—not videos or GIFs. What’s magical is that these animations are interactive and lightweight, making them perfect for the web.
Why I love Rive:
Smooth performance (way better than Lottie for complex motion)
Real-time interaction with clicks, scrolls, and hovers
Easy-to-update designs without re-exporting everything
Works beautifully in apps and websites
🧩 Can You Use Rive in WordPress?
Yes, absolutely. I’ve done this on client websites, personal projects, and even demo pages. Whether you're using Elementor, Gutenberg, or Classic Editor, you can add .riv files and let them play using the Rive Web Player.
🛠 How to Add .riv Animations to WordPress (No-Code Steps)
Design in Rive
Head to rive.app and create your animation. Add a state machine if you want interaction. Then click “Download .riv” when it’s ready.Embed the Rive Web Player
You’ll need to load the Rive player script on your WordPress site. Use this CDN version:
<script src="https://unpkg.com/@rive-app/webgl"></script>
Place that in your header using a plugin like Insert Headers and Footers.
Upload Your .riv File
Upload your .riv file to your Media Library or via FTP. Copy the file URL.Add HTML to Your Page
Now embed it with this:
<canvas id="riveCanvas" width="500" height="500"></canvas>
<script>
new rive.Rive({
src: 'https://yourdomain.com/wp-content/uploads/your-animation.riv',
canvas: document.getElementById('riveCanvas'),
autoplay: true
});
</script>
Use an HTML widget in Elementor or a Custom HTML block in Gutenberg. And you’re done!
🎯 My Favorite Rive Use Cases in WordPress
Animated logos that loop or bounce on scroll
Micro-interactions like hover effects and click states
Interactive buttons and icons with personality
Splash screens or pre-loaders that are playful but fast
Onboarding flows for product sites
🧠 Tips from Experience
Always compress your .riv file before uploading. Keep it fast!
Use autoplay: false if you want to control the animation with triggers.
If you’re building for mobile, use a responsive canvas or scale on load.
🔌 Can I Use a Plugin?
Right now, there’s no official Rive plugin for WordPress, but you don’t need one. A combination of:
Insert Headers and Footers (for script),
Elementor or Gutenberg (for layout),
And Rive’s player
…is all you really need.
Final Thoughts (From a Rive Addict)
Rive lets you go way beyond boring animations. Once you get the hang of it, you’ll never want to go back to GIFs or basic CSS again. And the best part? It fits perfectly into WordPress workflows. Whether you're a designer looking to wow clients, or just want to make your own site pop—you’ve got all the tools you need.
If you ever need help with custom Rive animations or want to collaborate on something amazing, you can always reach me through my site.
Written by Praneeth Kawya Thathsara
Rive Animator | Founder of uianimation.com
Top comments (3)
Love how you broke this down - no fluff, just straight to the good stuff for getting interactive animations into WordPress! Do you have any tips for smooth transitions between different Rive state machines on the same page?
Thanks so much, really appreciate the kind words! 😊
Great question about smooth transitions between different Rive state machines on the same page—here are a few tips that work well, especially in a WordPress setup:
Try combining animations into a single .riv file whenever possible. You can create multiple state machines or artboards in one file and switch between them using the Rive JS runtime. This avoids loading multiple instances and keeps things seamless.
Use CSS transitions (like opacity and z-index) if you're showing and hiding different canvases. This adds a nice fade or slide effect between animations instead of hard cuts.
Preload all Rive files, especially if you're using multiple .riv assets. Preloading helps eliminate delays when switching between animations.
Control the timing with JavaScript — if you’re using rive.play() or triggering state machine inputs, adding a short delay or sync logic can help animations flow smoothly from one to the next.
If you're using a specific WordPress builder or plugin to embed the animations, feel free to share and I can tailor the advice even more!
Hi Praneeth - thanks for this great article!
My Elementor Pro is not letting me upload a .riv file. What am I doing wrong?