Distribute width of SVG rectangles and getting them flush side-by-side

[spdyvkng]

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.

 

See the Pen wvgWjWp by pkej (@pkej) on CodePen

[Visual-Q]

Did you mean something like this?

 

See the Pen PoWzdPj by Visual-Q (@Visual-Q) on CodePen

[spdyvkng]

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:

See the Pen GRrqYyP by pkej (@pkej) on CodePen

[spdyvkng]

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. 

 

See the Pen KKaMbwe by pkej (@pkej) on CodePen

[Visual-Q]

You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility.

 

See the Pen MWJezEQ by Visual-Q (@Visual-Q) on CodePen

[mikel]

Hey @spdyvkng,

 

Does this suggestion help you?

 

See the Pen KKaMLXp?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy distributing ...

Mikel

[spdyvkng]

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.

See the Pen wvgzvoM by pkej (@pkej) on CodePen

[spdyvkng]

10 hours ago, Visual-Q said:

You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility.

 

 

 

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).

[mikel]

Hey @spdyvkng,

 

The trick with this concept: the rects overlap.
At power4.out the curve becomes very flat at the end,

the overlap is almost 100%. In order to fill the viewBox it takes a lot of rects.
If you increase the amount by 100 (= rect width), it looks like this with power1.out.

 

See the Pen GRrjoZr?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy experimenting ...

Mikel

 

 

[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.