Advanced Breathing Animation System: Easy Rive Integration

Advanced Breathing Animation System: Easy Rive IntegrationAdvanced Breathing Animation System: Easy Rive Integration

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Olena Tieriekhova

pro

• 15h

Interactive Breathing Animation System Built in Rive I'd like to share a project I worked on a while ago.

The visuals are simple, but the most interesting part was building a flexible animation system in Rive. I set up logic, states, and interactions. This allows the animation to adapt to different use cases. And at the same time, it stays lightweight and easy to integrate. All parameters are controlled by developers: from timing to breathing method. This makes it easy to adapt to different types of exercises.

Key features: • Multi-language support • Breathing method selection (nose or mouth) • Adjustable timing for each phase (inhalation, holding, exhalation, resting) • One animation system for all exercise types (relaxation, focus, energy, etc.)

Built before data binding was introduced in Rive 😂

Try it out: https://rive.app/s/qSSq8Fnsz0GfXhHoslnoyw/embed 1. Select your language. 2. Adjust the timing and breathing method. 3. Start the session. 4. Press Finish to end the session after the current cycle. 5. Tap New Session to restart. All parameters can be updated in real time.

Completed work