Draggable and TimelineMax not working together

[aaronpatty]

Problem 1: The Draggable.create() does not work unless it is put prior to the definition of t1 (the TimelineMax)... for example on line 3. There are workarounds for this... but I still get problem 2...

 

Problem 2:  While t1 is executing if the user drags the #Handle (the orange circle) t1 finishes (as shown by the execution of the onComplete event function for t1. This happens AFTER the onDragComplete, so that the seek & play command in onDragComplete is basically a no-op! I want to have t1 running and be able to drag the handle, and once it is done being dragged start t1 from the location indicated by where the user drug the #Handle.

See the Pen mdbpmLd?editors=1111 by aaronpatty (@aaronpatty) on CodePen

[ZachSaucier]

Hey Aaron and welcome to the forums.

 

1 hour ago, aaronpatty said:

Problem 1: The Draggable.create() does not work unless it is put prior to the definition of t1 (the TimelineMax)... for example on line 3. There are workarounds for this... but I still get problem 2...

This is because both the timeline and the draggable are trying to set the position of your handle. It would likely be best to use a "proxy" element for the draggable functionality as is seen in this thread: 

 

 

Then you can simplify your code a bit like so:

 

See the Pen WNedayo?editors=0010 by GreenSock (@GreenSock) on CodePen

[aaronpatty]

Thanks Zach! That was definitely the trick! I recommend putting a note in the documentation (e.g. on the .create() methods) a short description of why you can't use multiple functions like this without creating proxies as you've shown. Being a newbie I didn't even know what to call my problem, so that's why I didn't find the answer in the forums despite searching for more than an hour!

 

Thanks for the quick and accurate response!

[ZachSaucier]

Good suggestion  I'll update the docs to include a note about mixing timelines and draggable. 

 

P.S. I modified the onPress function above because I realized it was a little off.