Library used for Webflow Interactions?

Hey guys,

Just wondering if you use any specific library to do a lot of the heavy lifting for Webflow IX or if it is all custom written JS/JQuery that is used? I am interested in re-creating some of the effects in code myself.

Thanks,

Hi @hamishirving,

For the animations + sequencing, we use an open source library called tram: GitHub - BKWLD/tram: Cross-browser CSS3 transitions in JavaScript.

As for the triggering behavior (clicks, hover, scroll, etc), this is our own code that can be found in the webflow.js file that ships with any published/exported webflow site. Feel free to check it out.

1 Like

I think @danro forgot to mention… he’s the tram author as well ?

Ha yea I did notice that in the git repo, very modest.

I’ve taken a quick look at the webflow js file, I found the webflow IX section in the comments but to be honest I couldn’t glean a lot from how the code works (I’m a bit of a newb). For instance where is the trigger defined for when an element scrolls into view?

I found this post with your solution here http://forum.webflow.com/t/how-to-run-webflow-actions-from-js/3777

This is how my page looks presently.
You will notice when the more button is clicked two divs open, instead of one. I believe this is because they are both targeting the same class. Please how can I make it pick each item.

Can IX support ids instead of classes with your code sample. Like I said this is how my array for that item looks:

{“slug”:“show-management-detail-profile”,“name”:“Show Management Detail Profile”,“value”:{“style”:{},“triggers”:[{“type”:“click”,“selector”:“.mgtdetailprofile-block”,“stepsA”:[{“height”:“auto”,“transition”:“height 800ms ease-in-out-expo 0ms”}],“stepsB”:}]}},

Am I to wrap your IX Code within a script tag? Your help is well appreciated.