Vertical shopping cart

[Ivan Smokrovic]

Hello,

I try to make a vertical view of the shopping cart so that only 3 item is displayed. Clicking PrevButton moves vertically by only one item. The same should happen with NextButton only in the other direction. Also all of this should be in the infinite loop. I would also like the elements to be Draggable. Can you look at my code and tell me what I need to fix to achieve the desired result?

See the Pen JjRzdoN by Smokra (@Smokra) on CodePen

[ZachSaucier]

Hey Ivan and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

These forums are for specific questions, not general questions to help fix logical issues in your project's code. With that being said, here are a few notes about how I'd approach the situation:

• If there are less than four items, I would not show your buttons or create any animations.
• I would create a variable that keeps track of the current index.
• I would create a function that you can pass in an index to and it will animate the items to have the item at that index at the top of the cart section.
• I would create event listeners for each button that either increments or decrements the index by 1 depending on the button and then calls the function from the last bullet.
• I probably would not have a single animation and animate through the progress but instead create a new tween each time (making sure to overwrite any old animation) so that you have more control over how the items are animated.
• Since your cart is a fixed width do you really need a resize function?

Hopefully that's helpful. If you have a specific question, especially about GSAP, let us know and we'll do our best to help!  

[Ivan Smokrovic]

Hi Zach, thank you for your welcome and the guidance you have given me. I have applied everything I have learned so far. I decided that I still didn't want the items to rotate in an unlimited loop. I changed the code a bit, I almost got the desired result. Can you tell me how to disable moving an item up if I'm currently on the first item and if I'm moving items down to stay on the last item?
Sorry for the first post which was quite generalized, I hope I was able to ask a specific question now.

[ZachSaucier]

Some notes:

• If a user double clicks a button (i.e. a second click before the animation finishes) then the end value is messed up. You should either disallow clicks until the animation has finishes or use an index to keep track of where the end should be so that the end value is always correct.
• To limit the positions to the range that you want on click, you either need to keep track of the index or calculate the start and end y positions and then not animate if it's going to go outside of those bounds.