Seeking assistance with animation using pin

[Salah Belaid]

Dear GreenSock community,

 

I am attempting to implement animation with pin and transform but it seem to be encountering unexpected behavior (im using transform so the boxes leave their place blank and bottom text should be in boxes position )

you can see what i'm trying to reach in the video  

Please find below a simplified version of the code I'm currently using in codepen

 

Any guidance or suggestions you can provide would be highly appreciated.

I am open to alternative approaches or any additional information that could assist in resolving this issue.

Thank you kindly for your time and expertise.

See the Pen vYQGyOy by Belaid-Salah-Eddine (@Belaid-Salah-Eddine) on CodePen

[Rodrigo]

Hi @Salah Belaid and welcome to the GreenSock forums!

 

In this case is better to use pinning for each element and use pinSpacing false and use the endTrigger property in order to keep the elements pinned until that particular element reaches certain position in the viewport.

 

Something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Salah Belaid]

hello @Rodrigo 

 

Your assistance has been immensely helpful in resolving my animation issue, and I am truly grateful for your expertise and support

Your solution worked flawlessly, and I was able to successfully implement it in my project.

The clarity and detail of your explanation were exceptional

 

Thank you ❤️