Jump to content


Dynamic Touch Swipe animation with Tweenmax

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

Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation.


My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example.


I hope I could describe my problem well.


Thanks in advance.

See the Pen mJjpPY by fzolhayat (@fzolhayat) on CodePen

Link to comment
Share on other sites

Did you have a GSAP-specific question or were you asking more of a logic flow thing? We really try to stay focused on GSAP-specific questions here in the forums. 


You may want to look into using Draggable because:

  1. With your current solution (without Draggable), nothing happens DURING the swipe which seems unintuitive. I think most people would expect things to move with their finger/mouse when dragging. 
  2. You can use Draggable with ThrowPropsPlugin to get smooth momentum-based movement and apply snapping to make things start/end wherever you want, and it'll smoothly adjust. Here are some codepen Draggable examples: http://codepen.io/collection/AtuHb/ and Draggable's main page: http://greensock.com/draggable/
  • 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.