Rive button Implementation in Webflow - JS Runtime

Get your animated button functioning in Webflow!
Check out riveflow.webfl... for more info about integrating Rive and Webflow.

[@MatsOlsenDesign]

Great video! I struggled with this, but now I understand. I learned a lot of other things from your website too, so thanks!

[@jeffamcavoy]

Thanks for sharing that! Glad it helped!

[@alexandremaye1221]

Hey! Thank you so much for your tutorial. But now with the "Event - Open URL" in Rive, you do not need to use this JS Runtime? Because I have created this Event and it's "fire" on my Rive animation. Thank you for your help and answer 🙂

[@jeffamcavoy]

Great question! The Open URL event is awesome and does help to simplify the code a bit, but you do still need to use the JS Runtime. The link won't just open on its own. I just made a video about that here: kzbin.info/www/bejne/opmqY6eEjdeefrM

[@GiuseppeMinisteriofswing]

That's cool, but how could it be this working for multiple buttons/link with different texts and or translations? I think that being able to inject somehow some text to the rive components is the most lacking feature to really use the described method on a real world application

[@jeffamcavoy]

I think you’re right. Those are the current limitations to using these as common UI elements. I think some of that functionality is on the roadmap. Currently, the best uses for Rive on websites may be other interactive animations.

[@jenkisg]

Great presentation! Do you happen to know if this will work under the free (2-page) Web Flow plan?

[@jeffamcavoy]

Thanks! I don’t think you’re able to add custom code under the free webflow plans. But I’m not certain.

[@thegarlaki199]

Sibscribed, liked, follow, enrolled! Thanks!

[@jeffamcavoy]

Thanks! Hope this is helpful!

[@ManuMarea]

Is it doable on Framer?

[@jeffamcavoy]

I'm sure it is, but I haven't messed with Framer enough yet to know how.

[@ryaaaa]

This is so cool however I couldn't get it to work for me

[@jeffamcavoy]

Hey Ryaa, I’ll help if I can. Which part was not working? Feel free to reply here or DM on Twitter.

[@ryaaaa]

@@jeffamcavoy Hey Jeff, Thanks for coming back to me - I've managed to get it to work now. I didn't change the artboard name in my file. to double check, I can keep everything the same in your file minus the artbaord name and the link the button goes to?

[@jeffamcavoy]

@@ryaaaa Glad you got it working! Yeah, you'll need to make sure the artboard name is the same and update the link. You should also make sure the state machine name is the same (I used the default "State Machine 1"), and the names of your animation states if you want the cursor changes to work as expected. Otherwise, it should all work.

[@gflav]

My brain is mashed potatoes right now with the coding part. Why rive whyyyyy just integrate it into rive to link out or something.

[@jeffamcavoy]

😂 I think I had mashed potato brains the first time I saw the code too. I think there are some security concerns with linking directly out of Rive files, but it would certainly be more convenient!