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.