Jump to content


Increase Draggable/throwProps touch 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 there! I've been using Draggable and throwProps plugin to create a cool x/y slider. The problem is, as soon as I start adding images and content, the touch performance becomes quite bad - a lot of the times the touch isn't registered and the animations stutter. 


I was wondering - what are some good practices (if any) to optimize this kind of interaction? To give you an idea of what I'm dealing with, here's just a bit of the DOM I'm dealing with. 

<div id="homepage-slider">
<div id="slider-reel">
<div class="slide" type="casino"><div class="bottom-part"></div></div>
<div class="slide" type="poker"><div class="bottom-part"></div></div>
<div class="slide" type="sports"><div class="bottom-part"></div></div>

every .bottom-part element has a background image on it. The performance becomes especially bad when the background is resized, which is kind of important for mobile! 


Thanks  :)


EDIT: Maybe the mechanics of the slider play a role - if so a quick explanation. #slider-reel is an absolutely positioned element being 100% of the width and height of the container. I am able to sort the slides horizontally by specifying left: 100%, left: 200% and so on. Then I just initialize the thing with this: 

    var slider = Draggable.create("#slider-reel", {
     type:"x, y",
     lockAxis: true,
     throwProps: true,
     throwResistance : 3000,
         x : values,
         y : 0 - $(document).innerHeight()

values is an array of dynamically generated 'stops' off to the left of the screen, for the #slider-reel to snap to. If this information is important, and you would like to know more, please let me know! Thanks!

Link to comment
Share on other sites

Yikes, it looks like your post fell through the cracks here in the forums. Sorry about that. 


It's super difficult to troubleshoot a performance issue blind, so would you please create a simplified codepen or jsfiddle that demonstrates the issue? That way, we can take a peek at what's really bogging things down. Typically the performance issues have nothing to do with Draggable or GSAP - the biggest culprit is graphics rendering (people using very large images or complex styles/filters, etc.). 


Oh, and I'd highly recommend setting visibility:hidden on the elements that are off the stage/screen, just to optimize performance and tell the browser it doesn't have to worry about rendering those. 


Here's a barebones Draggable codepen that you can fork if you'd like:


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.