Skip to main content
C
2mo ago

How do I get a button url to work in Framer?

The Rive animation works correctly with the sound and in the State Machine the url event fires ... but in Framer the control for the url displays as a number. Is there a way when the button is clicked it will go to the url? Do I have to put in a special code? (FYI - I am a designer and not a coder.) See in Framer: https://accessible-gift-765422.framer.app/page-6

The Rive Share Link: https://rive.app/s/3IASJ4qaiESaXVN_CvVNYA/

Framer code:

import React, { useEffect } from "react"

import { addPropertyControls } from "framer"

import _ from "@rive-app/react-canvas"

import RiveComponent, {

componentName, propertyControls

} from "https://rive.app/api/s/3IASJ4qaiESaXVN_CvVNYA/framer/"

/**

* @framerSupportedLayoutWidth any-prefer-fixed

* @framerSupportedLayoutHeight any-prefer-fixed

*/

export default RiveComponent as React.ComponentType

RiveComponent.displayName = componentName

addPropertyControls(RiveComponent, propertyControls)

3 replies
C
2mo ago

Hi At the moment open URLs are not firing in the share links, engineers are working on a solution for this. There's a way to make a url open within framer that might be useful. You'll need to convert to stack your rive asset and in the top left corner an option to add a link will appear, let me know if this helps, I believe as you mentioned there's a way to make the open url event work with code, I'll check with a devrel and get back to you after.

2mo ago

Hi we'll update the framer generated code to get this included.

Basically what you need to add is the following automaticallyHandleEvents: true, to the RiveParameter

This will require you to step into the code and updating the Rive code.

Here is a video that demonstrates how to expose Rive Text runs to Framer. Following a similar approach you can add automaticallyHandleEvents: true,

But we will look into updating our generated code and let you know when that is available.

C
2mo ago

Thank you. I look forward to when you will update Framer to generate this code! I was able to get the url to work with that code. However, the animation did not play first. Since I want the batter to swing completely before it goes to the url, is there a way in the code to delay the url until the animation is complete? (I did put the exit time at 100% in Rive.)