[Poor mobile performance]

After I removed the `top` ainmation the animation as a whole got way smoother. I think this was one of the main issues.

[Poor mobile performance]

Removing the `height` from the animation and replacing it with `scaleY()` is very tricky

 

TweenMax.to(elem.querySelector('.project_text'), 0.4, {y: smallH, ease: easeF});

I managed to replace my `top` with the `y` selector. I am calculating the value off smallH like this:

 

var smallH = (((window.innerHeight - 300) * 0.9) * 0.4 - elem.querySelector('.project_text').getBoundingClientRect().height) / 2;

I little bit more inconvenient but i works!

 

Another thing I did to improve performance is to replace all my `opacity`'s with `autoAlpha`

[Poor mobile performance]

I noticed that the site won't load... Should be fixed now. I will try to implement your suggestions and will report back!

[Poor mobile performance]

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!