Jump to content
Search Community

Vertical images Carousel Wrap

tmusharraf test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...