Dynamic Touch Swipe animation with Tweenmax

[farhoudz 8 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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/