Skip to main content
4mo ago

Rive & Framer / State Machine

Hey Rive wizards! ⚡

I’m building my portfolio landing page in Framer and trying to recreate an animation I saw (attaching a video). I’ve got the text animation down, but I need help structuring the State Machine for the rest.

1️⃣ Boolean (isHovered) → Font weight change. Do I need two separate nested animations (one that hovers in and the other for mouse out), or is there a cleaner way?

2️⃣ Listeners  (Pointer Move & Hover) → Do I need a Pointer Move & Hover listener, or does the Boolean (isHovered) handle everything?

3️⃣ The project appears when hovering—should I use a Solo group for this, one with the project’s image and the other empty?

4️⃣  Making the project follow the mouse – I assume I need Number inputs (mouseX, mouseY), but how on earth do I actually set this up step by step? 😅

I have very little experience with State Machines, so if someone could guide me on how to structure this properly, that would be a lifesaver!

Oh, and I’m on a MacBook Pro, using different browsers like Opera, Chrome, and Safari—so cross-browser compatibility is a thing.

I’d really appreciate any help! I’m currently on the job hunt, and let’s just say my current hero section is… underwhelming 😅 → https://alexandra-product.design

Huge thanks in advance! 🙌

1 reply
R
R
4mo ago

Hey there!

I've put a file and video together to point you in the right direction.

picture.rev
810 KB