This tutorial walks through the entire process of creating a button with a hover animation and demonstrates these Rive features:
⚪️ SVG art import
⚪️ Nested Artboards
⚪️ State Machine
Find my Figma file here: https://www.figma.com/community/file/1201246416998505450
The button is available for remix on the Rive community here: https://rive.app/community/4234-8770-tweeter-button-for-tutorial
In a future video, I'll show how to take the Rive file and implement it as a functioning button in a Webflow website using the JS runtime code.
Stay tuned for a website where I'll share everything I can about making interactive animations in Rive and how to make them live on Webflow sites.
19 Comments