Link embed works but uploading .riv file to the web (host) is not working
Hey guys,
I have been trying to solve an issue with an animation that doesn't display very well on web, do you have any clue?
It's a progress bar 0% to 100% (I made it this time with targets as some users recommend)
Share Link: https://rive.app/s/Ut-I177eHky7ZRkaujksyQ/
.rev file: attached
I don't know why the link works but hosting the file on web breaks it, can you tell me if I am missing something? is the share link a source of truth?
Can I get a little more info as to what you mean by "doesn't display very well on web"? Are you seeing an error or maybe rendering issues? Which runtime are you using (canvas/webgl/webgl2)?
We are using Canvas Runtime.
I think it is rendering issues:
- The "weight" (at the top of the progress, named as Weight in the file) sometimes it displays with opacity (check the image)
- It keeps making a jump at the end of animation making it not accurate.
Can you share the .rev file so I can take a closer look?
I've got this working with React with the and have tested it in Chrome, Firefox, and Safari. The only thing I changed in the .rev was setting the default progress to 0 and made sure the first transition waits for the amount to be greater than zero (was greater or equal to 0).
If this is still broken for you, can you tell me which browser and browser version you're using. Also, can you verify that you're using the latest version of the Rive React runtime?
import React, { useEffect } from 'react' import { useRive, useStateMachineInput } from '@rive-app/react-canvas' import './Example.scss' const STATE_MACHINE_NAME = 'State Machine High Strike' const Example = () => { const { rive, RiveComponent } = useRive({ src: '/rive/hsNov25-20m.riv', stateMachines: STATE_MACHINE_NAME, autoplay: true, automaticallyHandleEvents: true, }) const progressInput = useStateMachineInput( rive, STATE_MACHINE_NAME, 'Progress', // This sets the initial value 81 ) return ( <div className='example'> <RiveComponent /> </div> ) } export default Example