Jump to content
Search Community

Drag div to set time, then animate back to start via timer

iamryandnelson test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. To get the element to animate back to it's start value try this for your onDragEnd callback:

 

onDragEnd: function() {
      TweenLite.to(this.target, 1, {x:0}) //or whatever value the start value is
    }

 

  • Like 1
Link to comment
Share on other sites

3 hours ago, Carl said:

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. To get the element to animate back to it's start value try this for your onDragEnd callback:

 


onDragEnd: function() {
      TweenLite.to(this.target, 1, {x:0}) //or whatever value the start value is
    }

 

Thank for the quick reply Carl :). This solution gets the animation working (I was writing TweenMax not TweenLite :P), but it doesn't sync with the timescale. If I update the time in your solution from 1 to 10, no matter how far I drag the image it will take 10 seconds to finish animating (setting it to 10 actually gets me 14 seconds). How can I set it up so that the whole draggable area is set to 25 minutes and dragging to a corresponding time on the timescale will produce an accurate timer for that time (e.g. dragging to the 5 minute mark will result in a 5 minute animation)?

Link to comment
Share on other sites

Oh, I thought you just wanted to know how to tween back to the starting position.

From what you describe it seems you need to convert the x value of the thing you are dragging to a time between 0 and 25 minutes.

Sounds like a good case for a map() function that allows you to map a value in one range to value in another range.

 

Definitely read and watch all the info Blake posted here:

 

Here's a demo that shows a Draggable's x value between 0 and 500 being mapped to a value between 0 and 10

 

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

 

 

 

  • Like 3
Link to comment
Share on other sites

This is really helpful, thank you.

 

I applied the map function you recommended, but in my case I'm dragging to the left, so I set the maxX to -565, which seems to throw off the maxDuration time. When I set maxDuration to 10 I get less than 1 second of animation; setting it to 100 gets me about 2 seconds. I could hack it, but would prefer not to...do you see what I'm doing wrong?

 

Here's my Codepen again: 

See the Pen dRbKMM?editors=0010 by iamryandnelson (@iamryandnelson) on CodePen

 

Link to comment
Share on other sites

the biggest issue with what you were doing is you were calculating the time on DragStart, but you really need to do that calculation onDragEnd.

 

 

Also since you are dragging to a negative direction and your sourceEnd value (dragLeftDistance) is negative you need to negate (make positive) those values to get the right values back from the map() function. 

 

time = map(-this.x, 0, -dragLeftDistance, 0, maxDuration);

 

I know it can be confusing, but it really helps to log out the values you are using when debugging. Please check the console here:

 

See the Pen ZypPKL?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I set the maxDuration to 5 which means that following positions on your ruler yield the following time values

 

position 5 : time 1

position 10: time 2

position 15: time 3

...

position 25: time 5

 

 

  • Like 4
Link to comment
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.
×
×
  • Create New...