Intro to interactions

In the 1800s, web content was printed on paper. In the 1900s, we downloaded the Episode I trailer in just under four days. What's the point? A lot's changed.

And as designers and developers today, we have access to superpowers that let us build complex interactions, design crazy animations, and literally control objects in real physical space using only our minds.

We can manipulate and build this content with insanely granular control, but much more quickly and powerfully, by doing it visually.

So what are we covering here when we're talking about interactions?

If we scroll through the page, then these elements change position, or, if we scroll and this element scales along the x-axis? Those are interactions.

If we hover over this element, we reveal that content. That's an interaction.

If our mouse position changes, these objects react in real-time. That's an interaction.

If we click on this, then that is revealed. That's an interaction.

So essentially, interactions let us design around two, powerful things: triggers and animations. (If this happens, then that happens.) We have a trigger (whether it's clicking or scrolling or hovering or moving the mouse) and we have an animation — we can apply timed animations and scroll animations and position-based mouse animations however we want...to give us the power to build anything we want.