Calculate and animate height in timeline

[Bebshow]

Hi.

How I can calculate and store a variable to give the height of the "cordes" block.
Because when I use the variable Y of the vertical block, the cordes (ropes, strings) are not the right length?

I tried to transform into PX, in%,
I tried to recover the height of the main block,
to subtract vertical from the main block and other simple calculations but each time, a 50% or X2 ratio applies

is this possible, or it would be better to use svg with two lines ?
Thank you for your attention and your responses.

#Edit

I just added Position Absolute to .vertical and his top and left.

See the Pen WNoyeJG by Bebshow (@Bebshow) on CodePen

[Visual-Q]

You can get the height of an element a couple of different ways, here's a couple of links to methods for that. Using it within the timeline you could use a callback at an appropriate point to get the values when you need them. Not sure what you're meaning to do with it so hopefully this points you in the right direction.

 

https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp

 

https://www.w3schools.com/jsref/prop_element_offsetheight.asp

 

 

[GreenSock]

Yeah, I didn't quite understand what you were asking but if you want to get the height (as in the computed CSS value) you could also do this: 

let cordesH = gsap.getProperty("#block", "height");