Trying to achieve smooth swipe navigation across viewports

[micshasan]

Hello folks -

 

We are attempting to use Greensock/draggable to achieve smooth, swipe based transitions between full viewport tiles on a canvas.  This is a for a web app and we are designing for mobile.  Unfortunately, so far the transitions are not at all smooth.  We're new to the package, and it's entirely possible that we're managing our settings poorly or that we are asking too much of it.

 

The symptoms we're seeing right now are:

• Canvas doesn't respond quickly to the initial tap to swipe.  There is a short initial delay, which doesn't feel good to the user.
• Canvas snaps back when you swipe it quickly, instead of continuing it's movement to the next tile.  This is most noticeable when you attempt a quick, short swipe.
• Canvas sometimes take 3-5 seconds to recalculate after an attempted movement, producing a significant freeze period.

You can see the live production app here: http://plow.io

We've posted a simplified codepen example above.

 

Any tips would be _greatly_ appreciated!

 

Thanks,

 

Colin

See the Pen qdaXwX by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I haven't been able to dig too deep into your code yet but 2 things I can offer

 

The 300ms delay regarding touch input seems to be a documented annoyance. There might be some helpful info here:

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

http://developer.telerik.com/featured/300-ms-click-delay-ios-8/

 

As far as general performance goes, I see that you are setting your Draggable to use type:"top, left" I would strongly recommend that you switch to type:"x,y" as x,y will use CSS transforms for greater performance. This change may require that you change other parts of your code though.

[micshasan]

Thanks very much for the tips and the kind welcome, Carl.  This is a huge help.  We've added the FastClick library for the 300 ms issue and this seems to make a big difference for Safari.  it's not helping with Chrome though, so we'll see if we have better luck with another library.

 

We're transitioning to type:"x,y" as well.  We've updated the codepen accordingly.  This requires some fairly involved re-working of our coordinate calculations, so it will be another day or so before we're ready to throw that live in production on plow.io.

 

In the meantime, does anyone have any tips for the actual transition settings?  In particular, this issue:

• Canvas snaps back when you swipe it quickly, instead of continuing it's movement to the next tile.  This is most noticeable when you attempt a quick, short swipe.

And a related one: a small movement should be enough to send the tile into motion, with the next tile sliding into the viewport.  Right now, only significant ('laborious') swipes have the desired effect.

 

Thanks again for your time.

[micshasan]

Carl and folks -

 

We've completed the code changes required for the x,y transition and pushed this to production at our site.  The css transitions seem to be a bit smoother and overall the app is more responsive now.  I've updated the codepen to reflect the updated settings that we're using.

 

We're still struggling with the actual transitions though.  In particular, the 'Canvas snaps back' issue I mentioned in the post above.  Any help would be greatly appreciated.

[Carl]

Glad to hear you are getting better performance.

I looked at your pen from your first post and it still looks like it is using top and left.

 

It looks like your snap function is bringing the elements back when you do not throw them hard enough.

You might want to adjust that so that perhaps based on the direction of the the throw, the snap will always return the proper value.

 

Check out Draggable's direction sensing abilities: http://greensock.com/gsap-1-16 should be easy to get the velocity at any time.

 

Also if you need more control over the ThrowProps tween, you can do a lot more if you define it yourself (as opposed to letting Draggable define it).

Please look at the ThrowPropsPlugin docs. It has a great chunk of sample code that shows how to do this

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ThrowPropsPlugin/

 

If you create your own tween onDragEnd you can probably just check the current velocity and then if its less than a certain amount, set it to be high enough for the thrown object to reach the next snap point. Another option is to use the end property to define a function that will determine in advance where should land (similar to snap).