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?
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?