Picadipity

Try out picadipity.com to see GreenSock in action! From your help I was able to build a control that features infinite looping of pictures using modifiers. The control also supports draggable and throwable behavior with stops at notches that centers the pictures. I am using the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> <script th:src="@{js/greensock/ModifiersPlugin.min.js}"></script> <script th:src="@{js/greensock/ThrowPropsPlugin.min.js}"></script> This has been great fun developing this control!

I just tested my code on iOS 10 today and was seeing this too. One phone bug down!

Great! The rotation is a big improvement for the stutter. Looking forward to your reply of the pause. Thanks!

Also, is it possible to set the speed (pixel/second) instead of always having to calculate the duration of the animation? That would really simply the code!

Getting back to my animation control that uses GreenSock. I'm working on performance now and need help with what I believe is TweenLite.fromTo() pausing the animation while reseting the from location. If you run the CodePen you will see a set of red rectangles numbered 0 - 15. The rectangles are repeated for a total of 32 rectangles. The animation starts at the second set of rects. When the rectangle labeled 8 (r8) is centered on the screen the code will call TweenLite.fromTo() to reset the starting location from the r8 of the second set to the r8 of the first set. The animation then repeats making it seem like there is an infinite loop. The thing I'm having problems working around is that the animation pauses at this point. There is also a stutters when a new rectangle comes on screen. This could be a paint issue but maybe you know what the issue is? System: iMac (Retina 5K, 27-inch, Late 2014) Processor: 4 GHz Intel Core i7 Memory: 16 GB 1600 MHz DDR3 Graphics: AMD Radeon R9 M290X 2048 MB Running CodePen on Safari 9.1.3 If I run CodePen on Chrome (52.0.2743.116) I still get the stutter and the r8 transition is a little better but noticeable. Thanks!

Yes, this is exactly what I am looking for. So nice to see the code is much simpler. Thanks!

This is incredibly fun software to work with. I'm fairly new to JavaScript and your docs and samples have been fantastic. In the Codepen I have a series of rectangles drawn on a canvas. When you drag or throw the canvas the expected rectangle index is shown below the canvas container. In the onThrowComplete handler I set up ThrowPropsPlugin.to so that one of the rectangles stops at the center of the screen. During onThrowUpdate and onThrowComplete I update the expected rectangle index but sometimes the value is off. This can usually be observed by slowly dragging the canvas to the right so that a rectangle almost snaps to the center of the screen. The position is also updated when onClick occurs so then the correct index is observed. Am I not using the code correctly or is there an event I can use that fires when the canvas finally snaps into position?