How to trigger Webflow interactions using JavaScript

Design help Custom code
2

You can manually trigger IX objects by following these steps:

  1. First locate the trigger object that you want to use. At the bottom of webflow.js, you will see a list of them in an array called triggers.

  2. A trigger object looks something like this:
    {"type":"load","stepsA":[{"wait":200},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]}

  3. Using the above trigger code, we can run it with the ix module:

var ix = Webflow.require('ix');
var $el = $('.your-selector-here');

var trigger = {"type":"load","stepsA":[{"wait":200},{"opacity":1,"transition":"transform 500ms ease 0ms, opacity 500ms ease 0ms","x":"0px","y":"0px"}],"stepsB":[]};

ix.run(trigger, $el);

That’s about it.

Not sure what your use case is, but you might want to bypass the IX system and use the core animation library that we use under the hood, called tram.

Tram examples can be found here: GitHub - BKWLD/tram: Cross-browser CSS3 transitions in JavaScript.

14 Likes