Streaming live at 10am (PST)

Understanding and modifying the webflow.js

Hi,
recently I exported the template and trying to edit as per requirement for my application but, I feel really tough to understand the code specially webflow.js.
I am not understating the connection with html, css, and js.
Let me know how can I go through the understating phase. I don’t see any tutorial for the exported code.
Let me know if anyone can help me.
Thank you…

Hey @swapnil147,
I had a similar problem because I didn’t understand how the interactions were built.
It’s pretty simple in principle. Webflow generates an ID for the animation (you can find this ID in the html object that is animated or the trigger is “data-w-id”)
The Webflow.js script is a compressed library similar to jquery. If you recognize something in the first part and can consciously edit it, you are really good at what you are doing. The animations are at the bottom of the script. In this part all data can be changed which are shown in webflow as symbols for example the trigger (“eventTypeId”: “MOUSE_CLICK”). You can also see the css properties but I don’t think it’s possible to exchange them because they are predefined: “actionTypeId”: “STYLE_OPACITY”

I hope that was helpful and could bring that a little closer to you.

1 Like

You might also want to look at this source / documentation for insights.

Hello All!

I understand that animations is just a small piece of Webflow.js , but I just created a small post that gives some insights into how one could change animations set in the Webflow Animations Panel, using JS. It might be helpful to anyone wanting to dig deep into webflow.js

Here it is: How to change Webflow Animation Properties - Community resources / Webflow Tips - Forum | Webflow

I just wish that Webflow’s Staff team could assign someone to prepare a proper documentation about webflow.js

1 Like