Different Rive animation Desktop and Mobile
Hello
I created a Rive animation for a customer that works wonderfully. Since we have problems with data protection in Germany, I saved the JavaScript file: https://unpkg.com/@rive-app/canvas@2.17.3, uploaded it to my own server and linked it in WordPress. It works perfectly.
https://www.mgl-design.de/rive_29_7/
My customer now wants to have a portrait version for the mobile phone in addition to the landscape version on the desktop. I created that too.
My web designer has now told me that the canvas in the code cannot have the same ID.
If I use canvas_m for mobile devices, for example. How do I have to adapt the JavaScript file so that it finds the mobile version and displays it correctly on the phone?
Best regards and thanks
Michael
Hello, Michael! You could use css media queries to conditionally show the right canvas depending on the window size or breakpoint. Here's an example of how it could work.
Hi
Hello Adam, thanks for the suggestion. My web designer is coming back from vacation tomorrow. I'll let you know then. Best wishes and have a great time, Michael
Hello Adam, thanks now it works. But my webdesigner had to write code into the child theme. Maybe in future there will be better and easier solution with a Rive plugin for Divi/WordPress. Have a nice day Michael https://www.mgl-design.de/rive-test2/