ekfuhrmann Posted November 12, 2021 Posted November 12, 2021 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.
Solution OSUblake Posted November 12, 2021 Solution Posted November 12, 2021 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. 4
ekfuhrmann Posted November 12, 2021 Author Posted November 12, 2021 This is exactly what I'm looking to do. Mind explaining what gsap.quickSetter does and how it works? 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?
OSUblake Posted November 12, 2021 Posted November 12, 2021 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. 1
ekfuhrmann Posted November 12, 2021 Author Posted November 12, 2021 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! 1 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now