Rive - Interactive Landing Page Animations

I was commissioned to animate a set of illustrations for a client’s landing page.

The client provided all the illustrations, along with references and clear direction on the type of animations they envisioned.

Due to the hand-drawn nature of the illustrations, some elements required frame-to-frame animations and couldn't be animated directly on Rive, these were provided by the client as well.

Each illustration required some form of interactivity such as mouse tracking, hover effects, or click-to-reveal actions.

This adds a dynamic and responsive layer to the user experience.

To begin, I carefully organized and prepared the design files provided by the client. This involved cleaning up layers, naming elements systematically, and optimizing each layer for smooth integration into Rive.

Having a well-structured setup helped ensure that the animation process would remain efficient and flexible for later revisions.

Once the files were ready, I moved on to animating and building the interactive components using Rive’s State Machine.

I experimented with various inputs and explore Rive's built-in features to ensure the animations complemented the interactive elements seamlessly.

While the animation directions were clearly outlined, translating those ideas into interactive motion required creative problem-solving.

Certain effects didn’t always behave as expected in practice, especially when combining multiple interactive elements.

To overcome this, I worked closely with the client through many rounds of testing and iteration. Each revision helped refine how the animations look and ensured that both design and functionality aligned perfectly.

In the end, we achieved smooth, visually cohesive animations that met the client’s vision and they were delighted with the final results.

Here are the final results! 🙌

1 - The main hero animation showcases a central eye that follows the mouse cursor. When clicked, it fires a laser, creating bursts of stars and leaving a tiny star. Each click also triggers a random change in the text following the cursor.

2 - Depicts a man and a woman playfully tossing a banana at each other.

Their outfits change with every click.

Try it out 👇

3 - Shows a caterpillar, cocoon, and butterfly that release sparkles whenever the user clicks on them.

Try it out 👇

4 - Highlights a bubbling cauldron that bursts with lines and tiny stars upon each click.

Try it out 👇

5 - Represents the unique personalities of each team member. Clicking on a person changes the color of their background box.

Try it out 👇

6 - Displays a quick animation of the word Alive in various fonts. Clicking on the text changes its color.

Try it out 👇

7 - Portrays a subtle idle animation of people observing the gallery—this section has no interactive elements.

8 - This is for the Contact Us section, this animation includes a large phone that reveals a small “Hello” text when clicked.

Try it out 👇

Thank you so much for checking out my work! 😊