We are super excited to announce the beta release of Webflow Interactions! (or IX for short)
This feature has been in the works for quite some time, and since it is nearing final release– we thought it was a perfect time to share it with the community!
DISCLAIMER: Interactions are still in Beta.
Please proceed with caution if you plan to use these in your site. There's still a chance that we could change something, requiring you to re-publish.
What is Webflow IX?
Currently, we provide the following triggers:
- Load - When the page HTML has loaded in the browser.
- Scroll - When an element scrolls into (or out) of view.
- Click - When an element is clicked (includes a toggle state).
- Hover - When entering or leaving the bounds of an element.
To enable the IX Beta
Ctrl and press
i, and you should see a message confirming the IX beta.
(Both Mac and PC should use the
Once activated, you will see a new Settings panel:
To add an interaction to an element, press the "New Interaction" button:
You will see the panel slide up and introduce the new IX settings.
Initial Appearance panel allows you to decide what styles should be applied to your element before the page loads. This is very helpful in certain cases where you might want to hide something right away, and reveal it later using a trigger.
Adding a Trigger
Simply select the trigger you would like to add.
Once a trigger is selected, you will want to add some
Effects are very similar to Styles, but they include
Transitions which allow animation!
Once you've added Effects, you can use the
Preview button to see your IX in action.
You may notice more advanced controls than what was covered here. We are still still adding the finishing touches to these areas, but please feel free to explore and play with them.
Things to keep in mind:
- Certain IX triggers are not compatible with touch devices.
scrollfor example, does not work consistently on iOS, so we simply disable it on all touch devices. (This includes the Initial Appearance for any IX that includes a
- IX animations will override any other type of regular Transition or Hover state, as they apply all styles directly to the element.
- Renaming an IX will not currently update other elements which are linked to that same IX. You must manually select each element and re-apply the IX. This will be fixed before final release.
- Yes, we plan to add more triggers
How can you help?
- Please explore the IX settings and let us know if you have trouble navigating or understanding the concepts. We know this is a complex workflow, and have tried our best to keep it simple.
- Device testing would be helpful. If something breaks on your Android tablet for example, please send us a message with your site and device specs.
- As always, please report any bugs!
Thanks everyone! Happy IX'ing