Hi,
I am working on a project for university.
I am using some animations on my site and on my desktop machine they all work fine and are smooth. But on my smartphone that's a whole different story.
TweenMax.to(document.querySelector('.logo'), 0.4, {opacity: '0', ease: easeF});
TweenMax.to(elem.querySelector('.project_bg'), 0.4, {height: '40%', ease: easeF});
TweenMax.to(elem.querySelector('.project_shade'), 0.4, {height: '40%', ease: easeF});
TweenMax.to(elem.querySelector('.project_text'), 0.4, {top: '20%', ease: easeF});
TweenMax.to(elem.querySelector('.project_desc'), 0.4, {opacity: '0', ease: easeF});
TweenMax.to(document.querySelector('.project_total'), 0.4, {opacity: '0', ease: easeF});
TweenMax.to(document.querySelector('.close_button'), 0.4, {opacity: '1', ease: easeF});
TweenMax.to(elem.querySelector('.content'), 0.4, {opacity: '1', height: 'auto', y: window.innerHeight * 0.3, ease: easeF});
These animations in particular are very slow and stuttering on mobile devices. I don't know if these animations can be optimized but if yes it would help me alot if someone can explain me how.
My easing function looks like this:
easeF = new Ease(BezierEasing(.37,.01,0,.98));
Do I have to reduce the amount of animations or do I have to use a timeline (which I didn't at all until now)?
URL: https://sftp.hs-furtwangen.de/~lautensc/gis/
Cheers and best regards!