How to integrate webflow.js to meteor project

Design help Custom code
1

Hi All ,

We are working in meteor project and tried integrating the webflow css and it worked fine with the suggestions from webflow forum . But now we are trying to also integrate the webflow.js file in our project which contains some interactions that got generated in webflow while creating one of our designs like this -

/
** * ----------------------------------------------------------------------**
** * Webflow: Interactions: Init**
** /*
Webflow.require(‘ix’).init([
{“slug”:“loginbox”,“name”:“LoginBox”,“value”:{“style”:{“display”:“none”,“opacity”:0,“scaleX”:1.1,“scaleY”:1.1,“scaleZ”:1},“triggers”:[{“type”:“load”,“stepsA”:[{“display”:“block”,“opacity”:1,“transition”:“transform 600ms ease 0, opacity 600ms ease 0”,“scaleX”:1,“scaleY”:1,“scaleZ”:1}],“stepsB”:}]}}
]);

as it has some actions which needs to be fired when the application gets loaded .

Could you please let us know how to integrate the webflow.js in the meteor project and call the interactions from meteor project.

Thanks
Ritu

2

Depending on the view library you use the solution differs. I’m using React. You need to ensure to load the Webflow.require part after the corresponding markup is loaded. For me the solution was to load Webflow.require later in the lifecycle of the component → componentDidMount

componentDidMount() {
Webflow.require('ix').init([
  { 'slug': 'zeroheightonload', 'name': 'ZeroHeightOnLoad', value: { 'style': { height: '0px' }, 'triggers': [] } },
  { 'slug': 'toggleanswer', name: 'ToggleAnswer', 'value': { style: {}, 'triggers': [{ type: 'click', selector: '.answer', siblings: true, stepsA: [{ height: 'auto', transition: 'height 500ms ease-in-out 0' }], 'stepsB': [{ 'height': '0px', transition: 'height 500ms ease-in-out 0' }] }, { type: 'click', selector: '.faq-control', 'descend': true, 'preserve3d': true, 'stepsA': [{ 'transition': 'transform 200 ease 0', 'rotateX': '0deg', rotateY: '0deg', rotateZ: '180deg' }], 'stepsB': [{ wait: '300ms' }, { 'transition': 'transform 200 ease 0', rotateX: '0deg', 'rotateY': '0deg', 'rotateZ': '0deg' }] }] } },
  { slug: 'closemenu', 'name': 'CloseMenu', 'value': { style: {}, 'triggers': [{ 'type': 'click', 'selector': '.menu', preserve3d: true, stepsA: [{ transition: 'transform 400ms ease 0', x: '100%', y: '0px', z: '0px' }], stepsB: [] }] } },
  { 'slug': 'openmenu', name: 'OpenMenu', 'value': { 'style': {}, triggers: [{ type: 'click', 'selector': '.menu', 'preserve3d': true, stepsA: [{ 'transition': 'transform 400ms ease 0', 'x': '0px', 'y': '0px', 'z': '0px' }], stepsB: [] }] } },
]);}