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.
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.
You might also want to look at this source / documentation for insights.
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
I just wish that Webflow’s Staff team could assign someone to prepare a proper documentation about webflow.js