I’ve implemented a Three.js particle logo on my site at:
The interactive element works perfectly on Chrome but then does not show on Safari nor mobile browsers.
Does anyone know how I can:
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.
Get this working on Safari and mobile versions - does not seem to load at all.
I would happily remunerate anyone for their support.
Take a look at your console in Safari on OS X.
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?
Any thoughts on this @webdev?
Would love the help / happy to remunerate for your time.
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:
transform: translate(-50%, -50%);