Jump to content
GreenSock

Victor Work

Draggable w/ Snap & ThrowProps | Dynamic Velocity

Recommended Posts

Hello guys
I am trying to make a draggable slide like these:
https://www.videinfra.com/  (Page Home)

http://www.benmingo.com/ (Page Home)

https://bullyingandbehavior.com/ (Page Home)

 

I tried to do with Scale in the Holder but it did not work very well, the closest I got was changing the vw of the holder. But now I do not know what I can do: does anyone help?

See the Pen oqvbXg by Noturnoo (@Noturnoo) on CodePen

Link to comment
Share on other sites

That's going to be headache to implement in HTML, you should try to do it using Canvas as done on benmingo site.

  • Like 1
Link to comment
Share on other sites

Yeah, I'm a little fuzzy on exactly what the question is. Can you be a little more specific? Is there a GSAP-related question? 

  • Like 1
Link to comment
Share on other sites

in fact I would like to create a Slide with Snap using Draggable that onPress give a scale in the content so that I can make the transition in the mouse moves. Sorry if it was difficult to understand. But I'm not getting it, so I wonder if there is a way to do this with Draggable

Link to comment
Share on other sites

Sorry, I'm still pretty lost, but even with my basic understanding it seems you want things to drag and throw while your content is scaling and still maintain some type of snapping. Unfortunately there isn't a built in Draggable function for that. It sounds like you would have to write a fair amount of custom code for Draggable to hook into. Perhaps someone else around here sees it differently.

  • Like 1
Link to comment
Share on other sites

Just a quicky demo of what I think you're asking. It's very basic, with no snapping or throw props. Scaling everything down, and keeping an image centered over the cursor will require some work. Probably easier to do with canvas where it's much easier to change where something is drawn. Same with SVG as GSAP has the smoothOrigin option.

 

See the Pen GxRRJe by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

@GreenSock @OSUblake I have been wondering about smoothOrigin for html for last couple of months, is it too complicated to implement or just will take too much KB space and doesn't have as much as demand compared to svg?

  • Like 1
Link to comment
Share on other sites

I'm going to study a little bit about this method,

although I do not have any in-depth knowledge of some of the features that you used in your example,

and let's combine that basic and equivalent to the advanced one for many people, especially my hahahha.


One question, I always see you  creating this proxy element in Draggable, why is this created?

Link to comment
Share on other sites

52 minutes ago, Sahil said:

@GreenSock @OSUblake I have been wondering about smoothOrigin for html for last couple of months, is it too complicated to implement or just will take too much KB space and doesn't have as much as demand compared to svg?

 

Hehe. I've been wondering how smoothOrigin is going to work once 3d gets added to SVG spec.

 

I'm sure the demand for smoothOrigin in HTML is there, but I'm guessing there's a potentially bigger performance penalty. In HTML, transform origin is based on the element. In SVG it's based on the 0,0 coordinate of the parent SVG element, which simplifies some stuff. And in HTML there isn't a nice equivalent of getBBox, which further complicates things. And then you have 3d. I'm not sure how smoothOrigin would work for the z-axis

 

Maybe Jack can further expand on the complications as I really haven't looked into it. I just know it works, and it's a great idea.

 

  • Like 2
Link to comment
Share on other sites

35 minutes ago, Noturnoo said:

One question, I always see you  creating this proxy element in Draggable, why is this created?

 

When you see me do that, it's because I'm not actually dragging anything. I'm just using draggable to initiate events. Notice how the proxy isn't even in the DOM/HTML. I'm converting the movement to the $holder element in the drag event.

 

And that's a really rough demo as I wasn't exactly sure if that's what you are trying to do.

  • Like 2
Link to comment
Share on other sites

I'm using the translator and maybe this conversion is messing up in my mind, let's see if I can explain it in more detail.

 


Let's take into consideration the site:
https://www.videinfra.com/

when you do a MouseDown on the screen it activates a draggable element that runs all over the screen, this draggable has a sniap that stops at a certain point, gives the trigger to an animation.

 

 

I would like to achieve the same effect, the scale part applies more to benmingo site that does the same dynamics above, but with scale in the elements of the page, the problem is being manipulate the snap, could I explain better?

Link to comment
Share on other sites

I think that's what the demo I made does, but I didn't implement the snapping. The scaling is what might be making it look different. And again, it still needs a lot of work.

 

See the Pen oqNXKq by osublake (@osublake) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@Noturnoo Maybe this will help?  You can change friction & selectedAttraction to get the effect I think your looking for (view it on codepen or it cuts the bottom off).

 

See the Pen WzNQMx?editors=1000 by smallio (@smallio) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@smallio Sorry I didn't understand, you want to recreate that flickity slider using GSAP? And another scroll bar at bottom with which you will be able to control slides? If I understand correctly you should create your own thread because even though it looks same, it won't be same thing to do as what Noturnoo is trying to do, it will just create confusion in active thread which has it's own confusion to be resolved.

Link to comment
Share on other sites

1 hour ago, Sahil said:

@smallio Sorry I didn't understand, you want to recreate that flickity slider using GSAP? And another scroll bar at bottom with which you will be able to control slides? If I understand correctly you should create your own thread because even though it looks same, it won't be same thing to do as what Noturnoo is trying to do, it will just create confusion in active thread which has it's own confusion to be resolved.

 

My bad, I did kinda think that... just thought my example was close to what he was trying to do. 

 

Your word is my command lord @Sahil, new thread coming up :D

  • Haha 2
Link to comment
Share on other sites

Quote

Your word is my command lord @Sahil

 

Did Sahil get a promotion, I missed the memo.

  • Haha 3
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.
×