Jump to content
GreenSock

philtan

Iphone/Android Swipe effect

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,


 


Am not really a web developer nor designer so i really hope there’s kind souls out there willing to share.


 


I would like to mimic the iphone/android swipe effect on desktop browsers.  Basically, each screen will have a couple of options(ie buttons) for user to select.  the user can also swipe left/right to see the other options.  all these will be just in single html page.  is this possible purely with greensock or it needs another JS plugin to detect swipe left/right?


 


another thing i need is to mimic the contact list.  so the user swipes up and down and the list will scroll with velocity effect (ThrowProps?) then select from the list.


 


any samples out there?


 


thanks


Link to comment
Share on other sites

Hello philtan, Welcome to the GreenSock Forums!

 

This is possible with GSAP.. Check out the Draggable plugin.

 

Draggable Demo Page:

 

http://www.greensock.com/draggable/

 

Draggable DOCs:

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

ThrowProps Plugin is a GreenSock Members only plugin. The below is taken from the bottom page of the Draggable link above.

 

Draggable is what handles all of the actual dragging and user interaction and it can be used without ThrowPropsPlugin if you don't need the momentum-based animation. It's a very useful tool on its own. However, to get the slick animation after the mouse is released (or touch ends), you'll need to load ThrowPropsPlugin which is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools as well, so check out greensock.com/club/ to get details and sign up.

 

For other Draggable Plugin examples checkout the GreenSock codepen page:

 

See the Pen GFBvn by GreenSock (@GreenSock) on CodePen

 

I hope this information helps? :)

  • Like 2
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Perhaps there are some users that have some examples to share.

Unfortunately our support is really focused on the helping people with specific problems they are having with GreenSock tools. We just don't have the resources to describe how to build complex projects from the ground up. 

 

I see Jonathan has provided some links (great job) which should give you an idea of how the code works. 

 

Here are some more demos that use Draggable/ThrowProps:

http://codepen.io/collection/AtuHb/

 

You can press the "fork" button on any one of those demos and experiment with the existing code or start fresh with some of the basic elements you will be using in your site.

Link to comment
Share on other sites

Hi Carl,

 

Understand.  Will study those samples esp the Draggable.

 

Thanks heaps!

 

Philip

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