I’m looking to setup an interaction that expands out in a few stages. I’ve got i mostly working, but the images seem to be scaling out proportionally which looksa bit odd, as you can see in the below screen grab.
Is there any way I can better set it up to essentially squash the images vertically, but maintain their original width the entire time?
Looks like your cooking up a really cool design there! Great work so far.
One option
I’m not sure if there is a way to do this by placing the interactions on the images rather its probably best to place the images into a div and controlling the divs height. Make sure to give the div a class the same way you gave the poles and then also set the div property overflow = none.
Second option
The other way is to just affect the container divs height (the one with the interaction). This would be pretty easy if you only wanted the the whole container height to change in one go. But if you wanted a more staggered apprach dependent on scroll heres one way…
What I did was to add each of the heights of the poles together (52px + 222px + 132px = 406px) then work out the percentage height each pole takes in the container div. I called my container div “pole-container” i also set the overflow = none. So Pole 1 = 12.8078818%, Pole 2 = 54.679802956% and Pole 3 = 32.512315271%.
So now you can just adjust the height of the container div “pole-container” by adding the Pole 1 % height to Pole 2 % height and then Pole 3 % height.
I hope that helps you witha few ideas let me know how you get on and if you need any more clarifications