Jump to content
GreenSock

joris-rotteveel

looping animation on scroll, how to add drag

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

Thanks Blake,

 

I haven't seen that helper function, looks great! Will dive into it, thanks again for your help!

  • Like 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

Yeah, I'll need to dig deep into that issue as it's not that straightforward what is happening with the proxy.

  • Thanks 1
Link to comment
Share on other sites

FYI, I'm still working on this, but can only devote a limited amount of time because we are getting ready for the next GSAP release. It's definitely much more complex dealing with an element being centered and @Sascha Fincher request, but I'm getting close to having it work kind of Flickity.

 

 

  • Like 1
Link to comment
Share on other sites

I'll follow that thread because that is pretty much the same use-case!

Excited about the new release!

Link to comment
Share on other sites

  • 1 month later...

@OSUblake, I was wondering if you had any thoughts to share on either this thread or here:

 

Not looking for a fully fleshed out solution, but a few pointers as how to achieve this.

Link to comment
Share on other sites

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

Thanks, I have been struggling to understand the wrapping myself!

Link to comment
Share on other sites

  • 1 month later...

I think this post will interest you: 

 

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

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

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

  • 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

You could use Observer plugin to listen for wheel/scroll events and advance the timeline accordingly (based on the direction), sure. 

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