Jump to content
Search Community

slider not working correctly on iPad.

RobbyT15 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've got an app that allows the user to move the timeline along when they move the 'scrubber' along the timeline.  However, on the iPad, it is incredibly glitchy and jumps from position to position and isn't smooth.  Why would this be operating like this?  When I test it in a browser, it works perfectly fine.  Here's the code for the slider.

$("#schematic_slider").slider({
				range: false,
				min: 0,
				max: 100,
				step:0.1,
				value:0,
				slide: function ( event, ui ) {
					init.progress( ui.value/100 ).pause();
				}
			});          
			function updateSlider() {
				$("#schematic_slider").slider("value", init.progress() *100);
			}
Link to comment
Share on other sites

I'd echo Chrysto's request for a sample codepen, and I'd bet that it simply has to do with the fact that you likely have some graphics/CPU-intensive stuff going on and the iPad just can't process things fast enough. In most cases, that has nothing to do with GSAP, as its JavaScript is highly optimized, but graphics rendering is the biggest CPU/GPU-hog by far and mobile devices just aren't very powerful compared to desktops/laptops. 

 

One thing I would recommend is to make sure you set force3D:true or force3D:"auto" on your tweens to make sure the elements get their own compositor layer. It can make a pretty big difference on mobile devices. And make sure you're animating position using x/y instead of top/left. 

  • Like 2
Link to comment
Share on other sites

Hi, I can tell nothing without seeing the actual slider code. If you create a codepen demo I may be in greater help. For now, what I would suggest is to upgrade to the latest version of TweenMax.

I'm not sure how a code pen would be of any help because the slider works perfectly on the computer.  It's when I try it on an iPad is when it breaks.  And what I provided is the actual slider code, but here it is again.

 

 

$("#schematic_slider").slider({
				range: false,
				min: 0,
				max: 100,
				step:0.1,
				value:0,
				slide: function ( event, ui ) {
					init.progress( ui.value/100 ).pause();
				}
			});          
			function updateSlider() {
				$("#schematic_slider").slider("value", init.progress() *100);
			}
Link to comment
Share on other sites

We ask for a codepen because we aren't computers ourselves. Just seeing some jQuery code doesn't help us understand what your HTML and CSS are, or how many tweens you have in the timeline, or what properties you are tweening, or what other code is running that could interfere. I don't see any usage of updateSlider in your sample so what's that for? If you want us to evaluate the performance of something we need to see it, not imagine it.

 

I agree with Jack that it's almost certainly because an iPad performs much slower than a PC, and can't keep up with the update rate of the slider, but that's just guessing.

  • Like 1
Link to comment
Share on other sites

Hi Rob,

 

There are plenty of folks who are willing to help, but in order to get anywhere it is your responsibility to produce something that we can actually test, or else we will just be guessing at things all day.

 

We recommend CodePen because it allows us to collaboratively edit, test and fix the code that you provide. 

 

You have posted the slider code twice and never mentioned that your app is canvas-based using KineticJS, which is probably the most important factor when considering performance on a mobile device. 

 

So even though your pen doesn't function at all, it tells more than the slider code alone.

 

Please make some effort to get the CodePen functional. I doubt we need to see your FULL production code. Just a small sample to simulate the performance issues would be fine.

 

It appears you aren't loading GSAP or KineticJS currently. Please consult this example to see how it is done:

 

http://codepen.io/GreenSock/pen/CHwDx

 

Note if you click on the gear next the JS tab you can specify the libraries you wish to load.

 

As a side note. GSAP executes the animation code INCREDIBLY fast, whenever there is lag the issue 99% of the time has to do with rendering (something GSAP is not at all in-charge of)

In my experience iOS devices are quite slow at handling canvas animations which require constant re-draws large bitmaps. 

 

1 Question: Does your animation play fine when the user isn't using the slider?

  • Like 3
Link to comment
Share on other sites

For a quick comparison here are 2 GSAP demos that use virtually the same code except one is a CSS/DOM animation and the other is canvas/KineticJS

 

CSS/DOM (red)

http://codepen.io/GreenSock/full/uhKIy

 

canvas/kineticJS (blue)

http://codepen.io/GreenSock/full/b4f09a7dd8ae4f7ad57fedc843b7485d

 

Test the srubbers of both on your iPad. I found that on my iPhone4S the CSS/DOM one scrubbed MUCH better than the canvas one. 

 

If you scrub very slowly with the canvas one it keeps up ok, but if you go fast you will see big jumps.

 

Again, I'm 99% certain this has more to do with the device not being able to do the heavy lifting of the canvas renders and not GSAP getting choked up.

  • Like 1
Link to comment
Share on other sites

Yea canvas can become very slow on an iPad, especially with the high definition screens - KineticJS will modify the pixel ratio to keep the image crisp, but it can create a huge performance drain.

 

I have a feeling you might be able to mitigate the unresponsiveness by throttling the slider update rate for mobile devices:

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    updateProgress(ui.value/100); // throttled
  }
});	

// one update per 150ms (arbitrarily chosen, adjust this to suit your needs)
var updateProgress = $.throttle(150, function(t) {
  tl.progress(t);
});
[ include the throttle/debounce plugin from http://benalman.com/projects/jquery-throttle-debounce-plugin/ ]
  • Like 3
Link to comment
Share on other sites

Yea canvas can become very slow on an iPad, especially with the high definition screens - KineticJS will modify the pixel ratio to keep the image crisp, but it can create a huge performance drain.

 

I have a feeling you might be able to mitigate the unresponsiveness by throttling the slider update rate for mobile devices:

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    updateProgress(ui.value/100); // throttled
  }
});	

// one update per 150ms (arbitrarily chosen, adjust this to suit your needs)
var updateProgress = $.throttle(150, function(t) {
  tl.progress(t);
});
[ include the throttle/debounce plugin from http://benalman.com/projects/jquery-throttle-debounce-plugin/ ]

 

Thank you Jamie, that actually explains alot.  I also tried the plugin, but it's still doing the same exact thing, so I think it's canvas that's doing it.

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