▼
Streaming live at 10am (PST)

Viewport-relative transform value

#1

Hi,

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

relativeMoveTransform
relativeMoveTransform.jpg1863x1342 267 KB

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?

Thanks,

PEP

Here’s the read-only project in staging: https://preview.webflow.com/preview/the-brutal-portfolio?preview=a9fa82108d52bff4b0eddedd4b0dcd88

#2

Hi, do you mean this line animation?

http://broplayground.webflow.io/viewport-relative-transform

Read-Only link: https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1

#3

Precisely!

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:

pEp.

relativeMoveTransform2

#4

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

#5

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!

#6

Vlad’s answer to the question about CSS calc:

Please, all who view this post vote here) https://wishlist.webflow.com/ideas/WEBFLOW-I-133#votes

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:

#7

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.

#8

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.

#9

No worries Bro. Thanks!