How do we make online learning cooler and more engaging with Rive, especially for EdTech?
What is Rive?
You know when you go to a website and click on a graphic element or something, and then it moves, or it bursts open! Or it follows your cursor around? Yup, that’s right! Rive is a web-based software that lets you do these cool things.
As a designer or developer, it allows you to create really cool, interactive 2D graphics or animations that are ready to run in real-time on any web interface, whether on apps or websites. Once you trigger the “Rived” element, it can change its state at that moment.
“Rive is built for fast and performant real-time animation. Everything in the platform behaves more like a game engine than a traditional design tool.”
I’m a few weeks into using Rive and for me, it merges Figma and After Effects Vibes. Rive has a ton of free tutorials on their YouTube channel and I’m currently learning to use Rive from Motion Design School. Just like learning anything about animation and motion design, grouping things several times on Rive and trying to “unsolo” a “solo” has frustrated me more times than I can count. But you don’t get to see all that hard work, all you see is the cute end result which I love too. In fact seeing is believing. Below is an example of how Rive works. Click on different elements below to see how it works.
Enter EdTech founders: I believe Rive can ramp up online reading and bring more engagement, especially for you guys’ learning platforms
A lot of teachers and educators use games to motivate their students. Gamification also means adding game-like features into non-game contexts to increase learners’ engagement (Roy and Zama, 2017). Keeping students (especially digital learners) engaged with reading material is quite challenging. People want to be entertained and girls just wanna have fun! If you’ve got an EdTech platform, web-based or app-based, you can use Rive to:
- Add interactive elements or vector-based graphics to the reading flow: For example if a student is reading about “the different arms of government in Nigeria”, there could be interactive objects they can click on to reveal pieces of a puzzle to match different roles to different government arms. You can also embed quizzes, polls, and other interactive simulations. This breaks the monotony and reinforces learning by engaging students in active recall and application.
- Add more visual content for visual learners: Rive allows you to design some basic gaming elements which you can add to a web platform and engage users’ and students senses even more.
Enter designers and developers: Things you guys may like about Rive
- You’ll get a “tiny file size” when exporting so you have little to no fear of large files slowing down your load or run time
- You can animate almost anything, even bones and run cycles
- It’s entirely open-source. So their runtimes are transparent and this gives you the ability to evaluate, contribute, or modify them
- You can embed your Rive files on several platforms (not all)
- You can collaborate with other people on a file
- The editor feels like you’re using Figma and After Effects
- Rendering files is super fast! With “Insane speed. Exceptional quality. Tiny size.” I know how long it takes me to render/export my models from Blender or After Effects, so this is a good welcome.
In October 2023, Rive announced that Hernan Torrisi, the founder of Lottie had joined Rive. I guess than we can expect some great things from Rive then? For those who do not know:
What is Lottie?
Lottie is like a super-smart animation format that lets you use cool moving animations across different websites and apps without making those websites slow or taking up too much space. It’s like sending a GIF or a sticker, but with way better quality and it doesn’t get blurry no matter how big or small you make it. With something called LottieFiles (it’s a format lotties export as), you can make these animations, see how they look on different devices, work on them with friends, and put them out there for people to see, super easily.
