🤏 Micro Interaction in Framer

Animate with Rive and natively + a freebie

Hi everyone. This is Framerly, the blogmail that brings you the “knows” and “hows” in the Framer community.

also, we think this is the future of no-code and Framer.

Jed Bridges @JedBridges

“Look Jenny, back then we wrote lines of code to make websites” “But why grandpa… didn’t people have @framer back then” “People are silly dear—people are silly”

This is what we have for you today:

• 💫 Icon animations in Framer with Rive by Abe Yang

• 🔈 Easy animated component by Ben Inssen

• ⚡️ Implementing Rive icons by Drawsgood

• 🃏 Dynamic Card by Framerly

💫 Icon animations in Framer with Rive by Abe Yang

This is another banger by Abe. Here, he shares how he created the animated icons with Rive for his website Remix Framer. A collection of every remix he has found, updated every month.

Abe Yang @abeyang

💡 Tip #2: creating sweet @rive_app icon animations and importing them to @framer Last week, I posted a Framer project that had some icon animations made in Rive. Here's a quick tutorial of how I did it. Let's go! 👇

Abe Yang @abeyang

🎉 Bonus 🎬 Tab icon animations made in @rive_app. State machine to @framer is 👌 🖌️ Sweet icons from @anronkai 🙌 Huge inspiration from @traf (browser!) and @FonsMans (ultra gradient!) https://t.co/q8GSv3FPrX

🔈 Easy animated component by Ben Inssen

You can see all the micro animations in Ben’s amazing web app Instaprice.

He shares in less than 11 seconds how to connect each variant, and how it looks deployed. Eyecandy 🍬

Ben! issen @ben_issen

@Gowtham_kcg Framer components! Easiest thing to do.

⚡️ Implementing Rive icons by Drawsgood

In this tweet, Drawsgood shares how he added animated icons in Framer. As always, the Framer community shares neat tricks to make your site look awesome.

Learn by watching.

Drawsgood @drawsgood

I had a couple people ask about deploying/implementing some animated icons I created in @rive_app. I've recorded a quick demo showing how to add an animated icon to a @framer site using a share link generated in Rive. Framer gives you access to the inputs in a .riv animation.

🃏 Dinamic Car by Framerly

This is a direct clone of Nike Card Components. We saw it as a Sunday challenge and made it within 15 min.

Spect our components in framerly .co/mponents.

Learning Framer Together @framerlyco

New Component 👀 ✨Dynamic Card✨ Play with it live here 👇👇 dinamiccard.framer.website (desktop Only interaction) Coming soon: framerly. co/mponents

---

That’s a wrap for today. If you want to tip us about anything FRAMER or say hi, find us on Twitter at @framerlyco.

---

allthings.framer is still under construction, by the meantime, you can get our clone of the weekend here and support our work.

---

:: FREEBIE OF THE DAY::

Nabeel Jawahir @itsnotnabeel

[FREE @framer TEMPLATE] ↓ nabeelj.gumroad.com/l/appfolio (P.S Be sure to keep an eye out for my upcoming design freebies by following me)

---

Use our code: pro-yearly-partner to get 3 FREE months on a Pro annual subscription. 

---