spdyvkng

Yeah, it looks like shuffling cards, and the different distribution curves will need finessing, but the concept is sound. Yes, thank you, I'm experimenting away, I'm looking into using the tick callback to make a series of images to create a webm of the animations, because my wife will need the finished product on her old MacBook Pro 2013, and it's not that good at shuffling the layers.

This works well, so I'm marking it as a solution. I didn't notice this at first. The distribution I did could still be refined, as you can see in my pen I had to find a pretty specific power to get almost exact frame edge alignment with DIV. But your solution works best, no quirks when I change the ease (eh, circ didn't work, but I have to look it up).

I suggest looking into this page: https://greensock.com/docs/v3/Plugins/ScrollTrigger. Also looking into general GSAP tutorials.

Thank you ?, that's quite close to what I was looking for, I think the toArray function is what I needed. I will try to understand what you've done here, and try to bulid it more to spec. However, what is happening when changing the ease? It seems that the number of rectangles has to increase with some functions, and this power4 gives a pretty interesting result, but I wonder what is happening to the first rectangle. https://codepen.io/pkej/pen/wvgzvoM

In the end I just dropped the gsap distribute utility and did it with my own code. I'd still appreciate any help that would let me use the gsap eases for the distribution. https://codepen.io/pkej/pen/KKaMbwe

No, I want the width of each vertical bar to decrease as we go to the left, or right. I was hoping to use "distribute()" in order to easily switch out the easing of the distribution. The one I did here was done with InkScape where you can interpolate between two lines and use an exponential value to alter the distance between each line. Then use the lines to intersect (one by one, unfortunately, not as a group) a rectangle to split it into two smaller parts. Like this: https://codepen.io/pkej/pen/GRrqYyP

Hi, I'm trying to create vertical blinds that are distributed in width. The obvious problem is how to accumulate the widths across the distribution for setting the x of the rects, short of crating a loop to do it manually (though then I have to provide my distribution function myself). There also is something funny happening when using the distribution callback, I get more divs than when I just use boxWidth, but that's probably just a bug that snuck in while I took it from my html-file and into the CodePen. The effect I'm trying to achieve is a non-linear distribution of objects to fill the full area available with no gaps between the objects.