Jump to content
Search Community

looping animation on scroll, how to add drag

joris-rotteveel test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi everyone,

 

I have made a looping tween that can be updated via scrollwheel. Ideally I'd like to integrate  a Draggable too, so on a tablet users can drag it around (scroll isn't an option).

 

What I did (see codepen) is abstract the update into a function so hopefully I can reuse it with a Draggable integration. Unfortunately, I could use a few hints/tips on how to get a draggable integrated. (the images need to be clickable, so a Proxy is prob not going to work?) because I can't really think of any.

 

Your help is much appreciated!

See the Pen zYPVBjw?editors=1100 by joris-rotteveel (@joris-rotteveel) on CodePen

Link to comment
Share on other sites

  • Solution

Hi joris,

 

Have you checked out our loop helper function?

 

https://greensock.com/docs/v3/HelperFunctions#loop

 

You could probably just use that and then add in a wheel listener. Just a quick example. The only thing I had to change in the helper function is to add the draggable instance to the timeline it returns.

 

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

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

After looking at Blake's solution, I used his approach off creating a Draggable on a "proxy" and called a custom update function on the appropriate callbacks (onDrag/onThrowUpdate). The InertiaPlugin.track gave me the current speed of the Draggable and I could use that as the input for my custom function.

 

Thanks Blake!

 

 

  • Like 1
Link to comment
Share on other sites

@OSUblake, I have been digging a bit deeper in your helper function as I wanted the "snap" function to snap to the center of the screen. During my "debugging/understandng" of your provided solution, I got a little confused why, if the snap function returns a static number, say 40, it keeps snapping 40 pixels from the last drag position? I was expecting this to always snap to 40px. 

 

Are there any tips you could share to make the slide snap to the center (or any other arbitrary number)?

I've created a fork that shows you the 40px snap being accumulated.

 

See the Pen jOYEjxz by joris-rotteveel (@joris-rotteveel) on CodePen

 

Link to comment
Share on other sites

  • 1 month later...

So sorry. It was bad timing because this happened right around the time we were getting ready to push out the latest version of GSAP, so  I had to this on the back burner. But now that's released, I can look more into this. 

 

I don't have a lot of pointers to give right now. It's a super complicated task, and I just started roughing out some ideas. I only got as far a doing a simple prev and next animation, so no dragging or wrapping at the moment. And the code super messy because I was just testing different ideas out as the wrapping can become really complex if the elements inside are not all the same width.

 

See the Pen 7add63e1e42d8bcad8f0fa2807498210 by osublake (@osublake) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...
On 6/2/2022 at 9:24 AM, GreenSock said:

I think this post will interest you: 

 

Here's the reworked helper function demo that offers a "center: true" feature: 

 

 

 

Does that help? 

Is there a solution to integrate also mouse wheel scroll function?

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...