Jump to content
GreenSock

megaman

swipeing slides in/out

Recommended Posts

I have an existing webpage which has multiple DIVs which each contain a "section" of content. They are positioned in the standard block level element way (one on top of the other)

 

To improve tablet and mobile users experience I want to change this so that each DIV is a slide and swiping it off to one side makes the next/previous DIV slide in.

 

My questions are

 

1) 
Is it possible to detect tablet and mobile devices with greensock?

 

2)
Is it possible to detect if events which are usually unique to tablets/mobiles such as tap and swipe are available using greensock?

 

3)
For moving the existing slide out I am torn between using the standard TweenMax.from() method to set the destination of the slide being moved out to some point just outside of the far left/right of the screen or using Draggable on the slide being moved out with snap to stop it going too far outside the screen bounds.
- Any advice which I should choose?
- If i choose the Draggable route and is there an event or callback function i cna use to detect if the slide has been completely moved out (so that i can a 
TweenMax.from() which moves the next slide in)?

- If i use the Draggable route is there any way to make the next slide "drag" with the draggable slide?
 

Link to comment
Share on other sites

Draggable will have no problem doing this, but I think you might be approaching it wrong. There are no native gestures like swipe or tap, just mouse and touch events. However, you can use those events to come up with your own gestures. HammerJS seems to be a pretty popular library for this, and yes, you can get it to work with GSAP.

http://hammerjs.github.io

 

So why do you need to know if it's a tablet or mobile device? For touch? My desktop computer has a touch screen. What are you going to do in that situation? Ignore my mouse events? Or what about a Microsoft Surface as it can be both a tablet and a desktop? Things can get really strange if you split the screen up, desktop on one side, tablet on the other. You might need to rethink how and what you're targeting for Draggable.

 

As for the easiest way to move something completely in or out of the view, use xPercent. I'm sure if you do a search on the forum for slider or carousel, it will bring up some examples. Here's a blog post about using it.

http://greensock.com/gsap-1-13-1

 

Here's an interesting tutorial you should check out, at least from a usability perspective. I helped him write the code, although I probably wouldn't do some of that stuff on a real project.

 

http://webdesign.tutsplus.com/tutorials/building-a-draggable-off-canvas-menu-with-greensock--cms-24359

http://webdesign.tutsplus.com/tutorials/completing-our-draggable-off-canvas-menu-with-greensock--cms-24796

  • Like 1
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.
×