Vertical images Carousel Wrap

[tmusharraf]

Hello everyone,

I need some help achieving an animation similar to the one on this website: https://www.elite-designstudio.com/ on my home page. I have already created the layout with different images and applied GSAP.

 

However, I am facing two issues. First, the images don't appear from the bottom after reaching the top, instead, they appear from their initial position. Second, all images are moving upward until the last image reaches the top, but I don't want that.

 

I have tried using the ModifiersPlugin (https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin#:~:text=utility function%3A-,Carousel Wrap,-Have you ever) but I couldn't get it to work. Here is my demo code: https://stackblitz.com/edit/web-platform-7qkkan?file=index.html. 

Thank you in advance for any help you can provide.

See the Pen by edit (@edit) on CodePen

[Rodrigo]

Hi,

 

You should try implementing the Vertical Endless Loop helper function:

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

 

That stems from the Horizontal Endless Loop helper:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Give that a try and let us know how it works.

 

Happy Tweening!

[tmusharraf]

12 hours ago, Rodrigo said:

Hi,

 

You should try implementing the Vertical Endless Loop helper function:

 

 

 

That stems from the Horizontal Endless Loop helper:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Give that a try and let us know how it works.

 

Happy Tweening!

 

Thank you. I tried this function but still did not get what I try to achieve. At first, it was not working then I changed the class from 

class="wst_image_container"' to 

class="wst_image_container wst-moving-images"

 

and remove the class from images. JS and HTML is updated. Here is new code: https://stackblitz.com/edit/web-platform-7qkkan?file=index.html

 

Can you please help me to identify the problem? Thanks

[Rodrigo]

Hi,

 

I believe the issue could be on your CSS setup. In this one everything works OK and the CSS is super simple, no grid or anything like that, just images stacked on top of each other and let GSAP run some magic to give them different sizes and positions:

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

 

I used the same setup in a React app (I don't know if you'll be using React or another framework):

https://stackblitz.com/edit/vitejs-vite-nuat5p?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[tmusharraf]

Thanks, It simply solves my problem. I'm not using React for this project but can read React and successfully implement the code. Thank You!