Skip to main content
G
1m ago

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

hsNov25-20m.rev
5 MB

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?

5 replies
G
30d ago

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)?

G
30d ago


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.

30d ago

Can you share the .rev file so I can take a closer look?

G
(edited) 29d ago

Hey Lance, here it is the file.
About the runtime we are using, the frontend guy said "I'm using Rive's React NPM package. I'm not sure what they use under the hood."

hsNov25-20m.rev
5 MB
29d ago

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?

hsnov25-20m 2.rev
5 MB
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