Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Techassi

Poor mobile performance

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

You can do somethings to optimize for mobile hardware ... in particular, you can use `x/y` rather than `top/left` since x/y equates to CSS hardware accelerated transforms. Getting the GPU involved usually results in dramatic improvement. Also Tweening the `scale` vs the `height` would be hardware accelerated, so you might see a boost there.

 

It's hard to say what exactly is bogging it down because I can't get the page to load with the given URL ... it stops in the mid 90s for me (generally around 95%).

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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`

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×