Rive for Beginners - Make an Interactive Animated Button

Рет қаралды 3,532

Күн бұрын

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: www.figma.com/community/file/...
The button is available for remix on the Rive community here: rive.app/community/4234-8770-...
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

@caspianievers 11 ай бұрын

I tracked this video worn from the FlowParty Slack channel. So glad I did. This answers a bunch of questions I have on day 2 in Rive.

@dalejanzen3253 Жыл бұрын

Thank you, Jeff... it will take a few times going through this to completely follow the flow, especially the state machine, but this will help me ease into things!

@jeffamcavoy Жыл бұрын

I’m glad it was helpful! If there are other things you’d like to see or if I should go more in depth on something, please let me know.

@waldobroodryk Жыл бұрын

You cover SO MANY features in this one video, it's so incredibly helpful!!! WOW! 👏

@ArtoonStudio Жыл бұрын

Hey Jeff! Found out about your channel just now and subscribed to it. It's by far the best tutorial I have ever seen for teaching rive. even the own rive channel sucks at delivering the content properly. Please continue creating more rive videos. You're really a PRO at motion graphics

@jeffamcavoy Жыл бұрын

Thanks so much for these kind words! I’m glad the video was helpful. I know what you mean about the Rive YT channel. They actually have a ton of great content, but it somehow feels like a hard way to learn. I had to watch a LOT before I felt like I knew what I was doing.

@waldobroodryk Жыл бұрын

The little tips from Rumple are so great!!!

@jeffamcavoy Жыл бұрын

Thanks, Waldo! I was excited to figure out how to do that!

@easthoodstudio9492 10 ай бұрын

Thanks Jeff! great intro to Rive! 🙂Now on to the rest of the videos!

@jeffamcavoy 9 ай бұрын

Thanks, Maggy!

@Mal0wens 7 ай бұрын

Brilliant!!!! Thank you!

@webbae Жыл бұрын

Very cool Jeff - looking forward to more of your videos.

@jeffamcavoy Жыл бұрын

Thanks, Keegan! I hope they're useful!

@andarwaly 7 ай бұрын

Thank you Jeff for the video! Learn a lot from this one video :) also, could you make the "tips" banner stay a bit longer on the video so I could read it or perhaps pause it on time. Thank you

@jeffamcavoy 7 ай бұрын

Glad it was helpful! And thanks for the feedback on the tips popups!

@victorwestmann Жыл бұрын

Really interested in doing this tutorial. Do you know where can I find the assets of this tutorial? Or do I have to create them from scratch? Thank you in advance!

@jeffamcavoy Жыл бұрын

Oh, I can share the Figma file. Good idea! I’ll post a link in the description later and reply to your comment again.

@jeffamcavoy Жыл бұрын

I added links to the Figma file and the final button on the Rive community.

@victorwestmann Жыл бұрын

@@jeffamcavoy Thank you very much for your time and patience in putting all this material for us. And thank you for sharing your assets with us freely! May the universe open all yours paths and keep up the great work!