Streaming live at 10am (PST)

Javascript: webflow smothing?

Im a designer using Webflow for almost three years, mainly as a prototyping tool But also for small projects, and its grown to be an essential part of my workflow to bridge the barrier between design and development. To the point; Its one thing thats always been a oversight in the translation from my prototypes and the finnished developed site when it comes to interactions. Its about the magic of smoothening in webflow interactions. Can someone point me to a direction where I can read about how this is donera in javascript? For me its essential to the point that I rather not using a scroll interaction on a project without this kind of ”smooth delay”.
We have tried a couple of different debouncing methods but never close to how webflow does it.

Hey ho Peter! :raised_hands:

Thank’s for that question, I’m really interested in digging deeper into the WF interactions engine (IX2) since quite some time.

So you use WF to prototype your designs, but recreate them afterwards completely with what technologies / tools?
If you export the code, animations are included with the webflow.js aren’t they?

So you are spoiled by WF’s smoothing option ?

Under the assumption I understood you correctly, are you referring to the curve adjustments option…

… or the delay option or smoothing option

image

In theory, it should not be too difficult to have smooth and fluid animations. There are many great libraries and frameworks that provide amazing animation tools, normally even small hand coded css transitions should be smooth, if used correctly?

Hehe yes, I know it sounds stupid to recreate everything. But they thats not up to me. The developers dont want to load a whole library and to write everything by them self they know its trimmed down and what is what.

No, Im not talking about the easings and bezier curves. Its the slider that actually say ”smoothing” when you create a interaction that respond to mouse movement or scrolling :slight_smile:

Thanks for you reply!!

I totally get them! When inspecting the coverage there’s lots of unused pieces and it’s not really a small library.

Here’s what you can do:

Create a clean new project, keep it as small as possible and add an interaction but leave the smoothing out. Publish and grab the webflow.js.
Now add only the smoothing and republish and grab the webflow.js.
Now go to your favourite ide and compare those two files and you should see what has changed and what makes the animation smooth

If you cant disable the smoothing make the difference in values as big as possible

If you are not that keen with code, may consult one of the devs

Let me know how it goes

I will try that, thanks! :slight_smile: