Hello!
So this issue is related to http://forums.greensock.com/topic/8221-infinite-draggable/.
I'm trying to create a carousel that can loop. This was proving fine with a "placeholder" DOM element, because I can simply assign the placeholder DOM element with Draggable and do the loop magic within the update callbacks to the actual carousel container.
However, on iPad we have discovered that using this method causes the motion to noticeably stutter when grabbing the coords from the _gstransform object and passing them through via the onUpdate callback to the actual carousel container. But, if we pass the actual container of the carousel into Draggable.create instead of the placeholder DOM element - it immediately removes the stutter on iPad 2 and 3. I know you use requestAnimationFrame for this, so I'm not sure why this is the case.
So... I removed the placeholder element and passed the carousel DOM element to Draggable.create. I tried something like this instead where onUpdate is being called with both 'onThrowUpdate' and 'onDrag' and I catch the current X position and try to set the carousel container to the loop point.
Although, it seems the position I set is overwritten on the next render cycle (which I guess would make sense) because it has no effect:
this.onUpdate = function( e ){
var itemsX = this.$draggableEl[0]._gsTransform.x;
if (itemsX > 0 && this.loopDirection != -1)
{
var tx = -this.$draggableEl.width() + itemsX + (this.itemMargin);
this.loopDirection = -1;
TweenMax.set( this.$draggableEl, {x: tx } );
}
}
Can I do this somehow without using a proxy or null object that passes the coords? Because it runs silky smooth on iPad by passing the actual DOM element to Draggable.create. Just need that loop functionality.
Anyways, thanks for an awesome library - and also for tweeting the McDonald's Myburger project. Draggable and throw props saved me on that project
Johnny
cartelle.nl