Dynamic Text Animation in Rive

The video above is a dynamic text animation done in Rive. This has been implemented on our portfolio website: https://plainlysimple.studio

The Rive file is just about 100 kb. I have also exported the animation as H.264 MP4 just to test, and it's about 2 mb. The difference in file size is substantial. The Rive file also has another advantage: it doesn't pixelate even if you scale it up. The MP4 would pixelate if the internet is slow.

The main text animation was done by recreating the font using shapes and then animating the path of those shapes.

The write-on animation was done by creating a line clipping mask and then clipping the line to the font. The line was animated via trimming the path from 0% to 100%

The play button was created in a separate rive file.

Bringing them all together, and this is the result.

Do you need Rive animations for your website? Let's work together!