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.
Hi
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!
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:
And here is a JS based example. It's using a trigger input, but you can replace it with a numeric input.