T
11d ago

Javascript detect screen size then pass numeric input to Rive.

Can I use javascript to detect the browser size. For example, if the browser is smaller than 560 then I want to pass the number '2' to Rive. In Rive if the number 2 is passed then show a mobile version of my animation. If browser is bigger than 960 then I pass the number 1 to show the desktop version of my animation.

4 replies
P
T
P
11d ago

Hi here is a quick example of passing an input based on browser window width. It includes the rev file so you can see the setup there as well.

T
9d ago

Thanks Phil! I am on the Free Plan at the moment evaluating the app so can not open rev files. Is there another way to see the setup? Also, the example links code is not in React I think. Is there an example with vanilla javascript? Thank you!

P
9d ago

The setup is pretty simple, just 3 states, with a single input condition determining which state to transition to.

Here is a good tutorial on inputs:

And another on conditions:

P
9d ago

And here is a JS based example. It's using a trigger input, but you can replace it with a numeric input.