Distribute cards evenly on motion path and animate

[Akash Ranjan]

Hello Guys,

 

I purchased the GSAP business for my organization to use the amazing motionpath plugin but it is giving me somewhat hard time to achieve my desired effect.

What I am trying to achieve here is to distribute all the cards evenly on the curve path and then animate it from right to left. 

The cards will appear from left and end in when the last card is at the middle. 

please see the attached image of what I am trying to achieve. 
 

 

Any help will be much appreciated.

Thank You
 

See the Pen VYwoyEQ by akashrwx (@akashrwx) on CodePen.

[Trapti]

Hi, 

 

I created a simplified version of the problem statement. Currently,  end value is 1, hence everything is going to end.

I did not understand how cards need to move from start to end but you can play around with end value to get the desired effect.

See the Pen XJWvBrY?editors=0010 by tripti1410 (@tripti1410) on CodePen.

 

[Akash Ranjan]

Hey @Trapti

 

Thank you for your reply. I tried modifying your code to get my desired result but still no luck.

My cards will be initially out of the screen and come in to view while moving on that path as user scrolls. Imagine it like a carousel but on curved path. They will enter the screen from left and move out of the screen to right.

[Trapti]

oh ok. Something like this 

 

See the Pen zxYgJaB?editors=0110 by tripti1410 (@tripti1410) on CodePen.

[Akash Ranjan]

Thank you so much @Trapti for your help. This is exactly what i was looking for. I wonder if there is an option to end the animation when the last item reaches center like this

[Trapti]

Glad it helped. 

 

Use end propery in motionPath. 1 is end of the curve 0.5 is middle. I updated the pen just to give the idea, you can finetune it,