Jump to content
Search Community

Get buttery smooth framerate with draggable/throwprops on mobile devices.

styke 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

This has currently only been tested on Android, so take it with a grain of salt for now. 

 

So if you've used draggable on some mobile devices, you may have noticed that the animation was choppy, even after all optimization you can think of (I'm looking at you, stock android browser). Even if you did get it smooth you may have not been able to use any other effects on the page as it would cause stuff to lag up, especially if what you are animating is quite large. 

 

I've found a way around this by incorporating native CSS transitions into the throwprops animation. The throwprops/draggable combo I used was for rotation, but I'm sure it won't be hard to incorporate this technique for other types of interactons. Take a look: 

//I initialize on a faux element that also happens to 
//be the trigger area. We will animate the actual element later on
rouletteClass.rouletteObj = Draggable.create('#interaction', {
    type: "rotation",
    throwProps: true,
    resistance: 1000,
    maxDuration: 10,
    onPress : function(){
        //make sure the element you want to be animating has 
        //something like transform: translate3d(0,0,0) set in css
        //so that it is GPU enabled
        //
        //Also, I use a great plugin, PrefixFree (http://leaverou.github.io/prefixfree/) to
        //automatcally add prefixes to any css set in javascript
        
        //reset position of draggable object
        $('#spin').css({
            //android %$#@#$ stock browser transition fix,
            //otherwise transition won't stop
            'transition' : 'all .001s linear',
            'transition-delay' : '-100s',

            //reset current position
            'transform' : 'rotateZ('+this.rotation+'deg)'
        });
    },
    onDrag : function (){
        var _this = this;
        //let user move drag element
        $('#spin').css({'transform' : 'rotateZ('+_this.rotation+'deg)'});
    },
    onDragEnd: function () {
        var _this = this;

        //Set up a transition for the calculated duration of the tween.
        //I had to use the crazy easing timing to appease the stock 
        //android browser once again
        $('#spin').css('transition', PrefixFree.prefix + 'transform '+ _this.tween.duration() +'s cubic-bezier(0.165, 0.84, 0.44, 1)');

        //Set a transform to carry it to the tween's end position
        $('#spin').css('transform', 'rotateZ('+_this.endRotation+'deg)');

    }
}); 

It still needs a little bit of cleaning, but you get the idea. As I started doing this, I was able to add alot more effects on the page (also via CSS properties), and even on the weakest devices in stock android browser, they would all work buttery smooth! Hopefully this helps someone.

Link to comment
Share on other sites

Thanks for reporting your findings! I'm curious - have you tested this on iOS and Windows 8 tablets? I have noticed that there's a HUGE performance disparity between Android, iOS, and Windows 8. So it might look buttery smooth on certain Android devices with CSS transitions, but much more jerky on other devices. Android favors CSS transitions of transforms just like iOS6 used to, but iOS7 was a massive step backwards performance-wise for those and I wonder if future versions of Android may suffer a similar fate. I have no idea, of course - I'm just curious about how much testing you've done. 

Link to comment
Share on other sites

Thanks for reporting your findings! I'm curious - have you tested this on iOS and Windows 8 tablets? I have noticed that there's a HUGE performance disparity between Android, iOS, and Windows 8. So it might look buttery smooth on certain Android devices with CSS transitions, but much more jerky on other devices. Android favors CSS transitions of transforms just like iOS6 used to, but iOS7 was a massive step backwards performance-wise for those and I wonder if future versions of Android may suffer a similar fate. I have no idea, of course - I'm just curious about how much testing you've done. 

 

To be fair, I haven't tested it on iOS - I will rename this (can I rename topic titles?) to be specific to android browsers, and update in regards to iOS as soon as I've done some testing.

 

Hopefully android won't follow suite anytime soon! It took me way too long and cost way too much to figure out how to get it perfectly smooth! 

Link to comment
Share on other sites

Hello styke,

  • What is the Android device and Android version that you were testing on?
  • When animating GSAP are you setting force3D:true to force hardware acceleration?
  • What was the code that you were using that was causing Android Stock Browser to lag?
  • Are you animating top, left or x, y ?
  • Do you have lots of images and assets your animating at once or large images?

I will be willing to help see, if i see this lag on my Android Devices:

  • Phone (Samsung Galaxy S3 - Jelly Bean 4.3)
  • Phone (Samsung Exhibit - Jelly Bean 4.1.2)
  • Android tablet (Galaxy Tab - Jelly Bean 4.3)

I haven't seen that type of lag on my Android devices.. but I will be more than happy to help test on my Android devices :)

  • Like 2
Link to comment
Share on other sites

Hello styke,

  • What is the Android device and Android version that you were testing on?
  • When animating GSAP are you setting force3D:true to force hardware acceleration?
  • What was the code that you were using that was causing Android Stock Browser to lag?
  • Are you animating top, left or x, y ?
  • Do you have lots of images and assets your animating at once or large images?

I will be willing to help see, if i see this lag on my Android Devices:

  • Phone (Samsung Galaxy S3 - Jelly Bean 4.3)
  • Phone (Samsung Exhibit - Jelly Bean 4.1.2)
  • Android tablet (Galaxy Tab - Jelly Bean 4.3)

I haven't seen that type of lag on my Android devices.. but I will be more than happy to help test on my Android devices :)

 

Hey! I was testing on Samsung Galaxy s3 4.3

  • As I the actual element that was being animated was not animated by GSAP, I had to set 3D rendering to the elements myself. 
  • The code that was causing lag was simple, just adding classes with some CSS transforms to elements with transitions very quickly in a recursive function something like this: 
    var shuffle = function () {

        var _this = this;

        if (this.rouletteSpinning) {

            el.removeClass('show');

                //some more logic
                
                //Select an element based on a random logo slug from the logoSlugs array
                 $('#'+rouletteClass.activeType + '-freebies').find($('[data-slug="' + rouletteClass.logoSlugs[Math.floor(Math.random() * rouletteClass.logoSlugs.length)] + '"]'))
                    .addClass('show');

                setTimeout(function () {
                    _this.shuffle()
                }, x)

        }
    }
  • I am animating the rotation.
  • I have lots of images, many of which are large. However I've found that switching on GPU rendering on them, even if they're not being animated, is a good way of increasing page framerate. 

 

Thanks so much for your offer, I will PM you a link once it is a little more developed! 

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...