Moving cards using ScrollTrigger along the arc direction.

[De.Minov]

Hello,

 

I am trying to implement the appearance of cards using ScrollTrigger, they should appear from the right off the screen and move along an arc to the position they have in the example.

I have been trying to figure it out on my own for a long time, find a similar case, and I eventually came to the conclusion that I can use the MotionPathPlugin, but it does not transform according to these values:

const path = [
	{xPercent: 15, yPercent: -15, rotate: -20},
	{yPercent: -5, rotate: -10},
	{yPercent: -5, rotate: 10},
	{xPercent: -15, yPercent: -15, rotate: 20},
]

And in relation to the current element.

 

I would be very grateful for a full help or a hint, at least on how to implement them off-screen first, and then each take their place. I think I can figure out how to attach this mechanic to ScrollTrigger on my own

Thank you in advance!

See the Pen dyLVXOP?editors=0100 by de-minov (@de-minov) on CodePen

[Rodrigo]

Hi,

 

This demo should provide a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

[De.Minov]

@Rodrigo,  thank you for the solution, but unfortunately, it doesn't work for me.

 

The thing is, I might have a different number of blocks.

 

In the beginning, the first element is in the center, the rest are arranged in an arc, with the direction of this arc either upwards or downwards.
There can also be different actions:
The first option is that with ScrollTrigger, these elements will shift to positions as in my codepen example.
The second option is that there will be a slider.

 

In the first case, there will be 4 elements within the visible area along this curve.
And in the second case, there will be only 3 elements.

 

I feel like a universal solution is needed, but I have no idea where to start, how to arrange them.
I am more inclined to use MotionPath, but I don't understand how to position n number of elements from the center of the arc and then animate them along it.

[Rodrigo]

Hi,

 

The demo I shared in my previous post was a way to show you how to do this a learning resource of sorts, nothing more. We don't have the time resources to provide fully working solutions for our users or give free general consulting in these free forums. We have to keep our focus on solving GSAP related questions and issues.

 

In order to understand how this works I recommend you to check this guide by David DeSandro:

https://3dtransforms.desandro.com/carousel

 

Finally if you want to use the Motion Path Plugin you can check any of these threads:

 

Also you can see this video where @Carl goes into a lot of detail about this:

 

Hopefully this helps.

Happy Tweening!

[De.Minov]

@Rodrigo, Hello, so I managed to place the cards, but I encountered a problem:
The cards should be positioned the same way, with equal spacing between them, but the starting position of the first card should be centered, while the others should be to the right of it.

 

I tried adjusting the start parameter as followsstart: .5 + cardSpaceAround[index]
But they are not positioned as desired.
I am desperate, please help🥲

 

Demo: Codesandbox

[GreenSock]

I don't have time to dig into that right now, but wouldn't it be?:

end: .5 + cardSpaceAround[index] / 2