I am aware my question is not complete but I need help to help you help me Do let me know what more I can provide to find a final solution.
We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations.
We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js.
The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again.
I have tried to debug it using chrome inspect element but have not been able to reach any conclusion.
Following are the elements that I have looked at.
- svg animation, I only have 1 single svg animation in the beginning of the website,
- dom elements. The number of dom elements was too much because of splittext which is not resolved,
- using x and y instead of left and top for better performance,
- using scale in only one animation
- using autoAlpha everywhere instead of opacity
I kindly request you to provide me more details on how can I debug my website. Following is the link : www.icdlabs.in/final
If you require any specific part of the code, I will post it here, please do let me know.
Thanks in advance.