Slide behavior on several elements on a path

[Leo-designer]

Hi guys, can anyone please help to achieve this.

 

1. Position the elements along the path from the middle of the path, right now im using .set and when the dragging starts is using from  the staggeroption from gsap.to

2. When dragging ends, get the nearest point to the center of the path and move it to that center.

See the Pen wvzqdvg by leo-designer (@leo-designer) on CodePen

[ZachSaucier]

Hey Leo-designer and welcome to the GreenSock forums. I'm not quite understanding what you mean by #2. Can you please try to re-explain? What center of the path are you talking about?

[Leo-designer]

Hi @ZachSaucier, thanks for your response. Sorry for not to be more specific.

 

The points, think i should called colored dots, anyway, will be this ones

 

 

and "snap" to the center of the curved line, (the path).

For instance, here, the nearest dot will be the red one, and i want to move it to the red line, when i finish dragging.

 

 

In this case will be the green one

 

and so on...

 

[ZachSaucier]

If I'm understanding you correctly, that red line where you want the points to snap to is a single point in the center of your path, correct?

 

I would calculate what percentage of the path each dot is away from the center. Say that percentage is 10%. Then I'd use an array of snap values: [(0.5 - 0.1) * totalDragDistance, 0.5 * totalDragDistance, (0.5 + 0.1) * totalDragDistance]. Does that make sense?

[Leo-designer]

@ZachSaucier Sorry, may be im an idiot, but where that 0.5 value came from?

[ZachSaucier]

It's the mid way of the total motion path progress. Since that's the point you want to snap things to.

[Leo-designer]

Mmmmm maybe i missing something @ZachSaucier, but that's result in snapping where the dots were before, not the middle of the path. Check here  Check here

I think the issue is the value im snapping against. 

 

BTW thanks for the time you spend on this. Really appreciate that

 

[ZachSaucier]

Going forward please use the "fork" button of CodePen to create new versions when sharing to these forums. That way context is not lost in previous posts  

 

I think you misunderstood what I was suggesting. I was suggesting to just use an array, not a function that returns a GSAP util snap.  Something like this:

See the Pen dypVXwZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: If you're going to use ES6 (like const/let) you might as well make all of your code ES6, using const/let for every variable and making use of new features like arrow functions if you want to  

[Leo-designer]

Uff niiiice, you guys are from other world! That's exactly what I tried to achieve.

 

Understood about the fork button, I completely miss that part, my bad.

 

 

Quote

Side note: If you're going to use ES6 (like const/let) you m...

And yep, thats the next step, among other details, but this part was keeping me not sleeping well for 5 days until now, just thinking how to solve this. Fortunately it was not wasted time, because i found so many features of GSAP that's really will power up next projects.

 

Once again, thanks for your time.

[Leo-designer]

Hi @ZachSaucier

I'm wonder if it is possible while dragging, and stops moving the mouse, but without releasing it, the dots can get some inertia?

Im trying to do it with the track method of Inertia plugin, but i cant get that result

[ZachSaucier]

1 hour ago, Leo-designer said:

I'm wonder if it is possible while dragging, and stops moving the mouse, but without releasing it, the dots can get some inertia?

There's a dragResistance property for that if I'm understanding you correctly.

[Leo-designer]

@ZachSaucier When you drag an object,  let's say from 0 - 100, and stop moving the mouse in 50, but without releasing it, (mouse down event still present)... how can I achieve that the dots receive an decelerating effect before reaching the final position? an ease effect? maybe an elastic or a bouncing effect?

 

Its very hard for me to explain this in english, as isn't my mother language, so I'm very sorry for that.

Thanks in advance for your answer.

[ZachSaucier]

16 hours ago, Leo-designer said:

When you drag an object,  let's say from 0 - 100, and stop moving the mouse in 50, but without releasing it

Ah, I see. That's very unconventional, I don't know that I've ever seen someone do something like that before.

 

You can do something like this:

See the Pen eYdeYmx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Obviously you'll need to handle resizing and change the strength to what you want it to be, but that should be a good proof of concept.

[Leo-designer]

1 hour ago, ZachSaucier said:

but that should be a good proof of concept

Yep, it really is, i will work from this. Thank you very much.

 

1 hour ago, ZachSaucier said:

That's very unconventional

What can I say,  I think this kind of crazy ideas could end in a great result...  thanks to you again! 

 

Have a nice day BTW