Jump to content
Search Community

Improve text scrolling performance?

Mr Pablo test
Moderator Tag

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

I created an RSS scroller that is being displayed on some Android tablets and the performance could do with a boost.

 

My code is as follows (feed being the RSS feed items)

 

function build(feed) {
                $.each(feed, function(index, value) {
                    if(feed[index].description === "" || feed[index].description === null || jQuery.isEmptyObject(feed[index].description)) {
                        description = "";
                    } else {
                        description = " - " + feed[index].description;
                    }
                $('#master_container').append('<p><strong>' + feed[index].title + '</strong>' + description + '</p>');
              });


              $('#master_container').children('p').each(function () {


                var height = $(this).height();
                var width = $(this).width();


                var timeline = new TimelineMax( { onStart: timelineStart } );


                var time = Math.floor(width / 1280);
                
                timeline.fromTo( $(this), time * 10, { x: 1280, y: 0, force3D: true }, { ease: Linear.easeNone, x: -width } );


                masterTimeline.add(timeline);
                
              });
              
            }

Is there any room for improvement here, in terms of FPS performance?

Link to comment
Share on other sites

Hmm, it's hard to tell how that code is running on some Android tablets. Since you are already using 2d transforms with force3D I'm not sure what else to suggest.

 

You may get more help if you produce a CodePen demo that clearly demonstrates the issue and provide some details about the hardware. Chances are though that if the hardware is underpowered there won't be much to offer.

  • Like 1
Link to comment
Share on other sites

A CodePen will only be of help if you view it on a low/mid range tablet (we are using 7 inch Chinese tablets, with a Cortex A9 CPU and Mail 400 GPU)

 

I know its the hardware making it sluggish, but I was hoping there was some way to optimise the GSAP code or maybe even an alternative to GSAP all together? (I know you might not want to steer me away form using GSAP, but suggestions are welcomed seeing as I'm already using GSAP)

Link to comment
Share on other sites

Hello .. Without seeing your code in a live editable environment, like codepen, or seeing a limited code example, it would be hard to guess with just the code provided.

 

A codepen example will still be helpful since it could be a number of things that are causing it to be sluggish .. i.e ..

  • HTML
  • conflicting CSS
  • other JS in your code
  • other jQuery Plugins
  • the version of Android
  • the version of the mobile browser
  • the model and device you are using
  • what you are animating
  • what CSS properties you have on your elements

As you can see there are a lot of stuff that could be causing sluggish behavior.

 

So it would be nice at least to see a limited codepen example, otherwise you can alsways debug your code in Chrome Dev Tools in Google Chrome.. and review the render paints on your elements.

 

:)

  • Like 1
Link to comment
Share on other sites

That sub-pixel rendering help with making your animation smooth so when the browser interpolates your tween it wont be choppy and improves browser performance.

 

I would not recommend it.. but if you really need to disable it, you can use autoRound:false ... but remember that autoRound is part of the CSSPlugin.. so if you are using the css:{} in your tween, include it in there.

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

autoRound

By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.

 

:)

Link to comment
Share on other sites

Hey Paul,

 

Like Carl presumed and later you confirmed, the device's hardware perhaps isn't powerful enough. What I could suggest is to create shorter animations, that could improve performance, I don't know the values that time can have in your code, but you could give it a try.

Link to comment
Share on other sites

You could try setting a very small z value or maybe rotationY:0.1 just to force the GPU to not snap the pixels to the grid. I would definitely NOT use roundProps because you WANT sub-pixel rendering. Snapping to whole pixel values is what gives you that jerky look. There's a chance that your particular device has a GPU that doesn't do sub-pixel rendering. 

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.
×
×
  • Create New...