Kevin Powell - Community•2y ago

How to make transition dependent on block height?

How can I implement the transition effect with a formula using js or css? I need the transition speed to depend on the height of the block. Tell me how can I implement this?

2 Replies

MarkBoots•2y ago

with JS, you can get the height of an element with element.getBoundingClientRect().height it will return a pixel value (without the unit) . that value you can pass to CSS with a custom property and calculate with that for example

const element = document.querySelector(".myElement");
element.style.setProperty('--height', element.getBoundingClientRect().height)

const element = document.querySelector(".myElement");
element.style.setProperty('--height', element.getBoundingClientRect().height)

.myElement{
  transition-duration: calc(0.5s * var(--height));
}

.myElement{
  transition-duration: calc(0.5s * var(--height));
}

If this is not what you need, please explain a bit more and provide simple example in CodePen.

EighthOP•2y ago

Thank you, this is exactly what I need

Gaming

Programming

How to make transition dependent on block height?