[Picadipity landing page]

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!

[iOS 10 & ScrollToPlugin]

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

[Infinite Loop (the good kind)]

Great!  The rotation is a big improvement for the stutter.

 

Looking forward to your reply of the pause.

 

Thanks!

[Infinite Loop (the good kind)]

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!

[Infinite Loop (the good kind)]

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!

See the Pen Gjgxxw by picadipity (@picadipity) on CodePen

[ThrowPropsPlugin: need different event handler to get correct draggable.x]

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

 

Thanks!

[ThrowPropsPlugin: need different event handler to get correct draggable.x]

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?

See the Pen epRxqv by picadipity (@picadipity) on CodePen