Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aaronpatty

Draggable and TimelineMax not working together

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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!

  • Thanks 1
Link to post
Share on other sites

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. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×