Taking your Buttons to the Next Level with Rive

[@DesignCourse]

Super excited to announce that I will be creating a 'Rive for Web' course in 2025. We're just touching the tip of the iceberg here! bit.ly/4dVpgRa Also, I want to reiterate: "Should you overuse these new abilities? No, not every project needs insane buttons that animate. However, they're very fun to integrate into creative projects where this sort of thing makes sense."

[@djblast101]

Accessibility ♿ has left the chat*

[@DDesigner123]

loving Rive and these tutorials!

[@googars]

Looks cool, but: no SEO, no fine-tuning in the code editor, no connection with the color theme of your app. Maybe a good toy for a fancy landing page, but not suitable for any serious production use. Would be great to find the same tool that results in HTML+CSS+JS.

[@abhijitdas601]

Get the SEO part but fine-tuning and color theme issue? You literally have all the controls to fine-tune in the Rive editor itself and you can (and should, don’t know why this even needs an explanation) set the colors according to your project theme.

[@googars]

@@abhijitdas601 ok, I guess this point requires a bit of explanation. Imagine you have multiple themes in your application, and users can switch between them in real time. The most common example is light/dark theme switching. The best way to achieve this in the current state of technology is by using CSS variables. Some years ago you would have to create a separate CSS file with all the needed rules overridden. But either way it is just a few lines of CSS code for each theme. And now let’s imagine you are trying to support this with the use of Rive. You will end up with a bunch of heavy rive files. Also if you are to change some color inside the theme you would have to go to the Rive sources, change them all and resave one by one. Instead of changing just one line in CSS variables. Also in the Git history you would have multiple files changed that require explanation of those changes, instead of just one self-explanatory line of code.

[@Dev-fo8zt]

This video must be satire or something

[@Boxels]

this is how you do a tutorial, actual real world use cases :D thank you! Continue doing these please. How to integrate into an interactive web app?

[@TheMarkDrake]

Could you expand on the performance and accessibility of adding Rive animations to a website? I'm thinking about things like (1) progressive enhancement, (2) beginning with an actual button on the page first, (3) preloading, (4) can *.riv be replaced with *.json, (5) use of CSS variables to control the size, color, duration, and so on and so forth. It's concerning that they chose their own file format (again, thanks, Lottie). In corporate environments, unknown file types are usually blocked from being delivered or sent by the server and clients on the network, and we've been running into these issues more and more lately. If not blocked by network protection policies, it often needs to be added as an allowed file and mime type to the various CMS and other systems used to manage the website. (The file format thing obviously hurts me a bit.)

[@eliasepg]

I tried it and really liked this tool, awesome stuff.

[@Dev-fo8zt]

Im so glad the designers at my work don't know about this.

[@PuspittaDiah]

why you glad?

[@Dev-fo8zt]

bc they will waste time making dumb a** designs like having 4 guitars pop out of a button

[@KarnageGaming]

so my question is if rive can do all of this already why is a collab with 2 advanced important? is it something to do with giving us better seo rather then us doing the whole thing in rive? or is it just that it does the html code for you so its more point and click and thats it?

[@badcatdesign]

Very cool. 🤘 Would love to see how to create an accessible version of this too.

[@blablabla2656]

Wonderful! More of this please! Keep up

[@vivianliu5011]

Somehow, it just reminds me of flash....

[@ankitdhyani]

😮😮🤩amazing

[@mandy4679]

Big no for every UX designer

[@abrar082]

Cool

[@azad01_]

poor developers who's gonna make code out of them 😅

[@dannyfcabrera]

There is no code involved. That’s the point of using Rive

[@AnkushSingh-rs9mq]

@@dannyfcabrera How to make the rocket animation in the start?

[@dannyfcabrera]

@@AnkushSingh-rs9mq I am not a motion graphics artist but Rive is the same thing as After Effects but for the web. You can find many tutorials online. Everything is essentially shape morphing

[@phat80]

If you buy every tool that is offered for building sites you will earn nothing 😂