Vertical Infinite Loop Carousel

[pixelbakery 2 Likes (Newbie)]

Hi. I was trying to reverse engineer this demo using the Modifiers plugin: 

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

 

I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.

See the Pen MWoMXgr by pixelbakery (@pixelbakery) on CodePen

[pixelbakery 2 Likes (Newbie)]

I figured out that I can set it to reversed:true, but I feel like that's not the cleanest solution

[GreenSock 18,255 Likes (Superhero)]

Here ya go: 

See the Pen OJgeKMG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm just using gsap.utils.wrap() to set up a wrapper function. You feed any value in and it'll wrap it between those values, so -101 would become 399 since it's wrapping from -100 to 400. 

 

Read about the modulus operator here.

 

Does that help? 

[pixelbakery 2 Likes (Newbie)]

Yes!! Thank you so much!

[pixelbakery 2 Likes (Newbie)]

Okay, next question. How do I make the height responsive? Obviously I know how to stretch the box responsively, but I'm not certain on how to get GSAP to respond accordingly.

[GreenSock 18,255 Likes (Superhero)]

If you know that you've got enough boxes to fill the area that the container expands to, then you can simply adjust your wrapper function accordingly. 

 

If you need some help with GSAP-specific questions, please provide a very clear minimal demo - I'm not really sure how exactly you're making the box "responsive", like which direction it's growing, what the problem is, etc. 

[pixelbakery 2 Likes (Newbie)]

Okay so this is where I'm at:

 

See the Pen JjJgvZL?editors=1111 by pixelbakery (@pixelbakery) on CodePen

 

(I'm using Tailwind for the css, but that shouldn't be too important)

 

Known variables:

- The height of each box will always be 24px.

- The max height of the box column will be 144px.

- The min height of the box column will be 24px.

 

Unknown Variables: 

- The number of boxes

- The actual height of the box column while within the bounds of 24 to 144.

 

I have two goals:

1. have the wrap respond dynamically since I don't know how many boxes will be within it.  

2. Make sure the number of boxes stays the same, but show less of them at once on smaller screens. i.e a phone should only have 3 boxes visible in the column at a time whereas a large screen could fit up to 6.

 

Where am I going wrong? 

Let me know if that example is not simple enough - I tried to cut out a lot of the bloat.

 

edit: I left overflow visible for debugging

 

[OSUblake 18,475 Likes (Superhero)]

Hi pixelbakery,

 

Notice in the original demo that the boxes are positioned absolute, and have their initial position set by GSAP. That's pretty important if plan on using the same wrap function for every box. Also, your dimensions aren't correct. 24 appears to be in rem, so the actual height is like 96 with the border.

 

 

[pixelbakery 2 Likes (Newbie)]

hmmmm... I still can't figure out what i'm doing wrong. Thank you for your help so far. This community is amazing. StackOverflow would have ripped me to shreds by now.

 

See the Pen JjJgvZL by pixelbakery (@pixelbakery) on CodePen

[pixelbakery 2 Likes (Newbie)]

Wait, I think I might have fixed it. Hold off on helping me

[pixelbakery 2 Likes (Newbie)]

Boom. Nailed it. The culprit was in trying to pass a variable to the initial y height of the timeline. I fixed this by creating the following string and passing that instead:

 

const yheight = "+=" + totalHeight*-1

 

I think a lot of other people will find this useful, so I'm going to fork my pen from here so others can reference it.

 

Can you double check my work really fast though to make sure everything is clean and done correctly?

[OSUblake 18,475 Likes (Superhero)]

Looks good for the most part. It might worth it to add will-change: transform; to CSS of your boxes as it can help with performance. 

 

To pause at the start, you can pass in a time value to the pause method.

reset.onclick = function(){
  tl.pause(0);
};

 

You could also write your yheight like this...

const yheight = "-=" + totalHeight;

 

 

[Dennyno 39 Likes (Newbie)]

Any small help here too: 

See the Pen mdXJRMp by DedaloD (@DedaloD) on CodePen

While the steps should be https://studiovoila.com/about/..

What the logic behind?

A pause after each transition?

[GreenSock 18,255 Likes (Superhero)]

Sorry, @Dennyno, I read your post several times and I still don't understand what you're asking. Do you have a GSAP-specific question we can answer that's not "how do I build this effect I saw on another site?"

 

We can't provide "build-to-order" solutions or general logic consulting (please see the forum guidelines).

[Dennyno 39 Likes (Newbie)]

Hi Jack, thanks.

 

My code works strangely, some lines disappear …

[GreenSock 18,255 Likes (Superhero)]

Again, it's hard for me to understand exactly what you're trying to do, but it looks to me like you've got logic problems in your code and CSS issues. 

 

Why are you using a stagger? That offsets the timing of all the tweens, so they're not synchronized. I assume you want them synchronized. 

 

And you're offsetting the y position of all the elements from their NORMAL position in the document flow. I assume you wanted them to be 50px apart instead (absolute)? So set your position: absolute and top: 0 and make sure the container is wide enough. 

 

Maybe you're looking for something like this?:

See the Pen RwQPQGN?editors=0010 by GreenSock (@GreenSock) on CodePen