Viewport-relative transform value


I have a line animation that must be attached to the bottom of the screen and finish its course over a specific y-value, which is variable upon the viewport (See screenshots below).

Is there any way I can calculate precisely the distance it has to run so the interaction is truly responsive?

Using sheer % or VH values doesn’t seem to do the trick. I suspect Javascript will be needed, some simple formula that calculates the VH minus some explicit values in PX and then applying the result to the move-transform value.

If I’m right, can you tell me the procedure to integrate it to webflow?



Here’s the read-only project in staging:

Hi, do you mean this line animation?

Read-Only link:


But in your example (thanks a bunch for helping btw!), the main part of the interaction is hidden (mostly with the version close to the bottom) since you use a high VH value to clear the canevas.

It’s a project in which the animation timing is crucial. The very beginning of the tween should start precisely from the bottom-aligned dash (see example), with a vertical scale to convey the idea of speed and fluidity (as in traditional frame-by-frame animation techniques), all the way with full opacity.

I’m almost convinced it can’t be achieved without some maths. Would you know a way with JS?

Thanks again, this is greatly appreciated :slight_smile:



Js my weak side) But your task can be solved through CSS (project links updated)
Here custom CSS:

.down-to:hover + .v-line {height: calc(100% - 56px);} .v-line {transition: .5s;}

Animation of “S” letter you can do via interactions

This is exactly that, thanks! :slight_smile:

I’ve been looking in the forum + wishlist and it seems the Cacl() CSS function is not yet implemented directly into Webflow.

I guest you proceeded with custom code. Can you show me the procedure to do so, I can’t find it in your read-only link.

Thanks a bunch!

Vlad’s answer to the question about CSS calc:

Please, all who view this post vote here)

You can clone the project

and see this CSS code in HEAD:
.down-to:hover + .v-line {height: calc(100% - 56px);} .v-line {transition: .5s;}

If after that there will be difficulties — write) I am glad to help you :v::slightly_smiling_face:

Got it, thanks!

I also upvoted the wishlist item :slight_smile:

Can I ask you to take a look at that question since nobody else seems to have an idea?

Again, big thanks for your time and help. I’m new to webflow and it’s hugely valuable to me.

I think in this case can not do without custom code. Sorry, but my JS skills do not allow me to help you with this issue.

No worries Bro. Thanks!