Jump to content
GreenSock

cereal_beast

'snap' to section when drag horizontally

Go to solution Solved by iDad5,

Recommended Posts

  • cereal_beast changed the title to 'snap' to section when drag horizontally

As far as I know, there is no easy, built-in way to do so.
I myself wouldn't use a timeline, if i was going for drag alone, Id use draggable() and some custom logic, as I find it easier to handle. I case you wnat both to work you probably should stay with a timeline and influence it with a transparent overlay that is draggable, but especially on touch devices I see a lot of problems coming your way, as drag ans scroll are often virtually the same thing...
I recall @GreenSock once conjured up a card carousel that mixed both, but even that solution - full of magic as it was - had some issues that would have made its use in the wild only possibel under narrow conditions.

You could also try to leverage the fact that dragging can cause scrolling I guess and use the the ScrollTriger for horizontal. 
It all would really depend on what you need/want in more detail. 

Link to comment
Share on other sites

I don't want to have any mouse scroll functionality on the section, so the slider is only "scrollable" using drag.

Like this but I need the boxes to snap as they currently do. - 

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


 

Link to comment
Share on other sites

Hi there!

 

This helper function may help. If you don't need it to loop you could probably create a much more simplified version 

 

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

There's also a lesser utilised snap utility outside of ScrollTrigger which you could pair up with Draggable.

https://greensock.com/docs/v3/GSAP/UtilityMethods/snap()

My advice would be to sit down with a bit of paper and outline all the logic you need, set up your HTML and CSS first, then sort out the draggable logic, then after that's done set up the snapping.

Tackle it bit by bit rather than trying to reverse engineer existing demos!

 

If you get stuck along the way or have questions about how draggable works or behaves, then pop back in with your attempt and we'll do our best to guide you.


 

Quote

I recall @GreenSock once conjured up a card carousel that mixed both, but even that solution - full of magic as it was - had some issues that would have made its use in the wild only possibel under narrow conditions.

Just want to add to this - Not sure what you're referencing here - but a draggable slider with advancing buttons is not beyond reach of possibility at all. It sounds like a very feasible project to tackle!

Link to comment
Share on other sites

If you do not want to use scrolling I still would recommend not to use ScrollTrigger, but if you wnat to try it this way, you'd have to use snap one way or the other. I'm not sure if that's will solve it without further tinkering. 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

Link to comment
Share on other sites

I've added draggable along the x axis to my pen, but Im unsure of how the 'points' work which is what snap uses. I've read the snap doc but I'm still none the wiser. How can I just make each '.box' snap to fit the screen (100vw, 100vh) when the next box is dragged over 50% of the way along the x axis (so the next box is taking up more of the screen than the previous box)

Link to comment
Share on other sites

You could for example onDragEnd just check the position of the dragged section (or the whole container, whichever suites you) and then, decide (in relation to screen size etc. if you move it to one or the other side with a simple gsap.to();

Link to comment
Share on other sites

  • Solution

See the Pen GRxMdoz?editors=1111 by mdrei (@mdrei) on CodePen

 

is that what you are looking for?

 

[Edit: I striped it down to the bare bones, and you would have to guard against dragging out, you could do this by setting drag boundaries, or checking inside the onDragEnd...]

  • Like 1
Link to comment
Share on other sites

Yeh thats great thanks, I can fix the boundaries etc. One last thing, do you know how to incorporate the scaling from my demo with draggable?

  tl = new TimelineMax();
  tl.to(".box", 0.25, { scale: 0.5 });
  tl.to("#targets", 0.4, { xPercent: -100/slides.length * activeSlide });
  tl.to(".box", 0.25, { scale: 1 });
}

Link to comment
Share on other sites

Now you lost me. The code refers to (the outdated) TimelineMax() and has nothing to do with draggable. the CodPen, scaling is entirely done with CSS, so what do you mean?
Is this directly connect to what we have talked until now, or is it a separate thing?

Link to comment
Share on other sites

In my demo (reattached here), the sections (boxes) are being scaled down when scrolled and then scaled back up when the active box is fully in view but only when scrolling with the mouse NOT when dragging. The code above is the code that is doing this: 
tl.to(".box", 0.25, { scale: 0.5 });
&
tl.to(".box", 0.25, { scale: 1 });

Im not sure how to use those gsaps in your demo though.

See the Pen 9a9293774802d781f8c466cd6777a27b by gwjr (@gwjr) on CodePen

Link to comment
Share on other sites

I updated the pen, hope that's what you wanted.

  • Like 1
Link to comment
Share on other sites

Ahh wait there is one final issue, the scaling is applied when onPress (click), but I need it to only apply when clicked AND dragged.

Link to comment
Share on other sites

Hey there @cereal_beast!

Just a little note that this has deviated from your initial request a bit and while @iDad5 has helped with the additional requests - this is drifting into 'list of requirements' territory which we try to avoid over here. 

Why don't you give it a shot yourself and if you get stuck I'm sure someone will happily jump in and assist you.

  • Like 1
Link to comment
Share on other sites

Super helpful, thank you.

Just realised your demo uses inertiaPlugin which isn't free to use, but thanks anyway!

Link to comment
Share on other sites

3 hours ago, cereal_beast said:

Just realised your demo uses inertiaPlugin which isn't free to use, but thanks anyway!

Yep, that's also what allows the "snap" to work like that but you could wire it up differently in an onRelease if you prefer. 

 

Hopefully you'd fine Inertia plugin and all the other bonus ones would make you far more profit than the cost of the membership. We often hear that it pays for itself in a matter of days when you consider how much time it'll save you, the added capabilities, etc. Club GreenSock is what makes everything we do possible. But don't sign up if you don't think it's worth it. We're passionate about having happy customers around here. If you're not thrilled with the value, we don't want your money. :) 

 

Good luck!

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