Streaming live at 10am (PST)

Library used for Webflow Interactions?


#1

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,,


#2

Hi @hamishirving,

For the animations + sequencing, we use an open source library called tram: https://github.com/BKWLD/tram

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.


#3

I think @danro forgot to mention... he's the tram author as well ?


#4

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?


#6

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.


#7