Rive: gamechanger voor interactieve animaties zonder coding skills

Wie nog niet van Rive gehoord heeft, maar wel een voorliefde heeft voor soepele animaties, soepele UI die je die extra voldoening geeft, of websites die een blijvende indruk nalaten door hun interactieve je ne sais quoi, dan is het even tijd om deze gloednieuwe app je aandacht te geven. Want die combineert het allemaal.

01 Wat is Rive?

Rive is een van die next-gen apps die je volledig in de browser kan draaien, maar evengoed als app kan downloaden. De manier waarop het ontworpen is, is met een hedendaagse blik, met aandacht voor gebruiksgemak, eenvoud van ontwerp en empowerment voor de gebruiker om straf spul te creëren, zonder dat deze eerst een lange traditie van verschillende vakgebieden moet instuderen. Het is instapklaar, maar in de finesses kan je er toch veel in uitdiepen. Easy to learn, hard to master.

Wil je meteen een goed idee van wat mogelijk is? Je kan bestaande projecten uittesten en analyseren via hun eigen community hub. 

02 Hoe Rive de kloof dicht tussen design en development

Voor de creatie van interactieve graphics waren de meeste designers altijd wat beperkt vanwege verscheidene  technische aspecten. Een van de belangrijkste is de development-kant die komt kijken bij de creatie van interactieve ervaringen. Die tegenstrijdige mix van DNA van designers die zowel visuele pareltjes weten te ontwerpen, en de abstracte logica van programmeertalen zoals JavaScript onder de knie hebben, is vrij zeldzaam.
Rive creëert die mogelijkheid voor een bredere groep designers, dankzij hun State Machine. Dit is een visuele interface waarin je jouw interactieve animaties uiteenzet. Je zou het kunnen omschrijven als een soort flowchart.

Een ander voordeel van Rive is dat het kan voortbouwen op bestaande concepten en werkwijzen, maar die condenseren en verbeteren met een frisse blik. Wie reeds kan werken met Adobe After Effects of Animate zal om die reden al een stap voor hebben op het leerproces. En de introductie van nieuwe concepten hier bovenop zullen diezelfde gebruikers geweldig vinden. Neem als voorbeeld hoe animaties kunnen ontworpen worden tussen verschillende States. In de klassieke apps ben je beperkt tot Easing-curves voor heel specifieke animaties. Wil je daar diversiteit in, dan moet je elke mogelijke animatie als aparte tijdlijn ontwerpen. In Rive vloeien de Easings in elkaar over tussen de mogelijke States die je ontwerpt, heen en terug. Het is een clevere maar tegelijk heel logische uitvoering.

En vooraleer iemand de term Lottie kan laten vallen, ook daar heb je met Rive een enorm voordeel. Om iedereen up-to-speed te brengen, met Lottie kan je jouw After Effects-projecten webvriendelijk maken. Maar dat was altijd wat omstreden wegens bestandsgrootte en performantie die, hoewel niet slecht, zeker ook beter kan. In een use case van Duolingo wordt omschreven hoe een specifieke animatie na herontwerp in Rive nog slechts 16 kb groot was, waarheen voordien vanuit Lottie 241 kb. Heb je zo’n website of app met meer van dit soort animaties en een grote groep gebruikers, dan telt elke kilobyte.

03 Andere use cases

Een paar van de early adopters van Rive zijn zeker geen kleine namen. We lieten Duolingo al vallen, maar ook de homepage van Figma werd ge-rived. Tot de lijst zouden ook Google, Samsung, Sonos, Adobe en Soundcloud moeten behoren, om er maar een paar te noemen.

Maar beslis vooral zelf. Veel interessanter om het over te hebben, zijn de diverse omgevingen waar je jouw Rive-animaties kan inzetten. Dankzij de Rive Runtimes wordt jouw ontwerp met eenvoud omgezet naar een van de volgende apps, games of websites: Web (Javascript), iOS, macOS, Android, Flutter, React en React Native, C++, Defold, Unity, Unreal, Framer en Webflow.

04 Wat moet dat kosten?

Op het ogenblik is Rive volledig gratis voor onbeperkte periode. Je bent dan wel gelimiteerd tot 3 ontwerpbestanden, maar voor wie Rive gewoon wilt uitproberen is dat van geweldige waarde. Beslis je van professioneel te gaan, dan is er de Voyager-formule, of de Enterprise voor grote bedrijven. Bij de Voyager leg je zo’n 32 dollar per maand op tafel. 

05 Starten met Rive

Ben je nog op zoek naar 3 damn good reasons om te starten met Rive? Here you go:

1. Interactiviteit toevoegen is heel eenvoudig
2. Complexe animaties maak je in no time
3. Animaties met responsive layouts 

Door guru:

Jensie