Three.js interferes with the css animation that has been created

Questions
1

I have a website that combines css animation and three.js

When I tried it on the computer, the css animation and three.js that I created ran perfectly and smoothly, without interfering with each other.

However, when I tried it on a mobile device directly. The css animation I made was interrupted with three.js. Animation feels slow and delayed

Any suggestions, how to fix it?

This is the website that I have created: https://arifabas.com

Additional note :
I have 2 version

  • mobile version (css animation)
  • desktop version (three.js)
1 Like
2

Have you checked the frame when you’re running the website on mobile? Maybe it’s too heavy to run smoothly?

3

this page has its first paint after ~ 40 seconds, finishes loading after ~2 minutes, and transfers ~ 80mb of resources. i think it has bigger issues. if your page has a little lag, but no one waits 2 minutes to see it, does it really lag.

4

I’ve tried various ways, such as:

  1. Change the .gif file format to .jpg
  2. Disable the auto typing animation feature in comics

It still feels slow when accessed on mobile

However when I disable the three.js script for the desktop version. Animation on mobile is back to smooth.

Additional information, I only call the three.js script when it’s on the desktop only

5

Nice work! Very creative. I love the comic.