Need Help with Hover/Static States
I’m trying to create a hover interaction where a static image transitions to an animated icon on hover, and back to the static image when hover ends. However, I’m encountering issues where neither the static nor hover states are appearing correctly during the transitions. Here’s what I’ve done:
1. Imported my static image and animation (JSON exported from After Effects).
2. Created a State Machine with Static State and Hover State.
3. Set opacity of the static image to 100% in the Static State and 0% in the Hover State.
4. Set opacity of the animated icon to 0% in the Static State and 100% in the Hover State.
5. Configured a Boolean input (isHovering) to transition between states:
• Static State → Hover State when isHovering == true.
• Hover State → Static State when isHovering == false.
The state transitions are logged correctly in the console (see screenshot), but:
• When transitioning to Hover State, the animated icon doesn’t appear.
• When transitioning back to Static State, the static image doesn’t reappear.
Environment Details:
• Browser/App: Rive Desktop App
• Operating System: macOS
• File Type: Static image (PNG/JPG) and JSON animation (Lottie export).
Hey there! Without seeing the file, my best guess is that there is an opacity key missing somewhere. If you send a copy of the .rev, I can take a look and find the issue. If you want to keep the file private, you can always send it in here: https://rive.atlassian.net/servicedesk/customer/portals