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?
Until now, certain interactive events could only be handled using custom JavaScript code. Webflow IX changes this, by introducing a new “trigger” system that allows you to hook in to these events and then apply a series of animated effects once the triggers occur.
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
Hold down Ctrl
and press i
i
, and you should see a message confirming the IX beta.
(Both Mac and PC should use the Ctrl
key)
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
The 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.
Trigger Effects
Once a trigger is selected, you will want to add some Effects
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.
###Advanced options
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.
scroll
for 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 ascroll
trigger.) - 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