Jump to content
GreenSock

novellino

TweenMax not scrolling smoothly on tablets/smartphones

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

Hello,

I using ScrollMagic in my site in order to make an animation. You can see the animation here:

http://jsfiddle.net/VRBG2/2/

 

And the code I am using you can see in the jsfidde similar to this:

 


 var topToBottom = new TimelineMax()
.add(TweenMax.to("#section3", 1, {marginTop: "0"}));
 
var scene = new ScrollScene({
triggerElement: "#section1",
tweenChanges: true
})
.addTo(controller)
.setTween(topToBottom);
 
My problem is than on tablets/smartphones, iphone, iPad and Android this animation looks very bad. Is very slow and not smooth at all.
Does anyone see any problem in my code.
And should I use any other plugins for making this to work better in tablets/mobile?
 
Thanks in advance
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 

 

We regularly hear of fantastic results even on older mobile hardware.

It can greatly depend on how and what you are animating. 

For instance animating a 2D transform like translateY() (or simply y in GSAP) will perform MUCH better that animating marginTop or top. For an added boost you can set force3D:true to push your element onto a GPU layer for even better performance.

 

I wasn't able to test your fiddle properly on my phone as it seems the outer page wants to scroll but not the "result" in the iframe. Regardless, I modified your code to use y instead of marginTop

 

div_height = $("#section2").height();
  TweenLite.set($("#section3"), {y:-div_height, force3D:true});
  var controller = new ScrollMagic({
  globalSceneOptions: {
  triggerHook: "onLeave"
 }
});
     
var topToBottom = new TimelineMax()
.add(TweenMax.to("#section3", 1, {y:0}));

http://jsfiddle.net/mDTvX/2/

 

let us know if that works better for you.

  • Like 1
Link to comment
Share on other sites

Hello.. I just tested both links.

 

I tested on my Galaxy S3 (4.4.2) and on a Windows 8.1 ASUS tablet, in portrait and landscape view:

 

For the first jsfiddle link I only noticed slight pixel snapping, but it animated fine.

 

When I tested Carl's forked jsfiddle link.. using the y property .. it was very very smooth!

 

Test were done in:

  • Android Stock Browser
  • Google Mobile Chrome

:)

  • Like 1
Link to comment
Share on other sites

Yes it is true it works much better now.

Thank you

  • Like 1
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.
×