This content originally appeared on DEV Community and was authored by UI Animation
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
This content originally appeared on DEV Community and was authored by UI Animation