WebGL Particle Logo not working on Safari or Mobile

Design help Custom code
1

Hi guys,

I’ve implemented a Three.js particle logo on my site at:

https://preview.webflow.com/preview/vovi?utm_medium=preview_link&utm_source=dashboard&utm_content=vovi&preview=05814d42c5fb011e452e4052b75dc28e&mode=preview

The interactive element works perfectly on Chrome but then does not show on Safari nor mobile browsers.

Does anyone know how I can:

  1. More acutely resize and position the animation to be responsive (currently using the Webflow designer controls - probably not the best method). I’m looking to have the canvas centred and responsive.

  2. Get this working on Safari and mobile versions - does not seem to load at all.

I would happily remunerate anyone for their support.

Many thanks,

TJ

2

Take a look at your console in Safari on OS X.
CloudApp

3

HI @webdev

Thanks for that, I’m fully aware but I’m unsure of how to rectify any of the errors - the WebGL particle interaction has full support across Safari, Chrome, and Firefox and mobile:

Could possibly shed some light on my options for implementation?

Many thanks

4

Any thoughts on this @webdev?

Would love the help / happy to remunerate for your time.

5

Use a PNG instead of your SVG (there are issues with it) and get rid of the data-renderer="webgl". Use that as a baseline to further enhance.

For the canvas try setting the CSS to:

 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);