Jump to content
Search Community

Adjustable Scrubber using Draggable plugin

ekfuhrmann test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hey there,

 

I'm trying to have a scrubber that can be moved on the X axis, as well as expanded/collapsed on both the right and left using a couple handles on each side. Using draggable it was easy enough to get the scrubber to move as wanted, but I'm running to trouble having the handles resize the scrubber. I think I got it somewhat working in the sense that the scrubber is resizing in relation to my cursor drag, but the handle is flying all over the place so something is messed up in my logic no doubt.

See the Pen XWaPZOd by ekfuhrmann (@ekfuhrmann) on CodePen

Link to comment
Share on other sites

  • Solution

To do this, I wouldn't actually drag the handle. I would use one of my favorite Draggable techniques, using a proxy element that's not in the DOM. The basic idea is that you use a trigger to start dragging the proxy element, and then apply those changes to the actual target.

 

This should help you get started.

 

See the Pen WNEgKar by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

13 minutes ago, ekfuhrmann said:

This is exactly what I'm looking to do. Mind explaining what gsap.quickSetter does and how it works?

 

Here's the docs on it...

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

If you need to constantly set a value, quickSetter will perform better than the normal gsap.set().

 

17 minutes ago, ekfuhrmann said:

I also plan to use this as a React component. Do you know if there are any challenges that may be associated with using proxy elements in React?

 

It will work fine as React will never touch the proxy elements. Just create the proxy elements inside the same effect you create your Draggables, and you should be fine.

 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

It will work fine as React will never touch the proxy elements. Just create the proxy elements inside the same effect you create your Draggables, and you should be fine.

 

Thank you so much Blake, as always you have been an immense help with learning more about GSAP and getting animations working. This is working wonderfully in my React app, so that did the trick placing them into the same effect!

 

The amount of help and knowledge you and the rest of the team offer is great and I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers. I can only hope one day I can get to the point of thinking about these problems as the way you do. Nonetheless, thanks again and I hope you all have some nice upcoming holidays ahead of you!

  • Like 1
  • Thanks 1
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...