Streaming live at 10am (PST)

Beta Release: Webflow Interactions!


#1

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! smiley

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 a scroll 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 wink

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 train


How to implement this css effect into my site
#2

Been playing with Interactions on http://blog.webflow.com and blog posts and it's soooo sweet! thumbsup thumbsup


#4

OOOOO SO COOL!!!! Can't wait to play with this.


#11

Ok gang, I've changed the shortcut to Ctrl i i

No more ctrl+x mishaps. We are now zero days since last accident!


#16

I have a question about 'load'. Is this a '$(document).ready();' or '$(window).load()'?


#17

This is pretty awesome. This will make Webflow really stand out (even more) blush

It goes pretty much without saying... And looks like it works perfect. I'm testing!


#18

@bartekkustra, it currently uses $(document).ready()... but we could consider an option for the full window load, if you think that would be useful? (perhaps for a preloader?)


#19

That's exactly what I've been asking for smile $(window).load() gives a HUGE opportunity for site loaders smile I think that should be added asap. You can take a look at what I've recently did at http://laitart-template.webflow.com smile


#20

Well done Webflow devs.. awesome.


#21

Great work guys - happy to see this feature here.


JSB


#22

Play with this new release last night.

THIS CHANGES THE GAME!

It's so easy to use! GREAT JOB, DEVS!


#23

Hey guys let us know if run into anything. Be sure to test it on mobile!


#24

@thesergie

So far so good. It's perfect really.
Awesome! punch

http://www.rowan-saran.nl/


#25

Hell yeah!! I was concentrated on the web I missed this outstanding release. thanks again guys!


#26

Holy *HIT!!! This is a game-changer for non-devs!!! Awesome work!!!


#27

I have to say... This is superb and this is not cool stuck_out_tongue_winking_eye Superb because this feature is AMAZING. It's working great! But... on the other hand this is replacing me stuck_out_tongue_winking_eye I'm just afraid that every site will now have this fade'n'slide effect like everywhere making the site not clear and awesome anymore...


#28

Hey @bartekkustra, definitely agree with you! We want these interactions to be functional and enhance the experience, not turn the web into the days of gratuitous Flash animations. We're thinking of ways we can encourage this via our UI, but also want to give designers freedom to implement very useful interactions. As with many things in Webflow, with great power comes great responsibility smiley


#29

awesome....webflow is jux amazing.....thanks @callmevlad and webflow team. You making webdesign exciting here. cant wait for the blog feature too... smiley


#30

This is beyond words smiley

Edit : After a bit of testing I found that everything works fine except for one thing. Maybe I am just missing something :
What is supposed to happen when setting a toggle event? If I set a click toggle event to hide some element, it indeed hides, but when I click again, the element that is supposed to show up just does not show up. Some what I am supposed to do to fix that?

Also when trying to click to trigger a toggle event, I have to click two time before it works.

Edit 2 : I found how it is supposed to work. I thought that setting a toggle event sets automatically the action and the opposite one if clicked again. But in fact, you have to set the action on click, and then the other action on the re-click (which is the toggle).


#31

This is fantastic guys, congrats and thank you for all of the hard work you've put into this. Been plying with it for a bit now, would it be possible to create a more detailed tutorial on it's official release? I haven't been able to get the results I was aiming for in my tests yet...