Reveal elements on hover

In this brief introduction to the topic of interactions, we'll cover the basics—including an overview of triggers and animations.

1:22

Triggers and animations make up the two primary aspects of any interaction: a trigger is what starts or continues an animation.

4:31

Learn about interpolation (creating motion between points), easing (for non-linear animation), and smoothing (creating a damping effect).

2:58

Reusing interactions on a series of similar components requires you to replace elements from your original interaction with elements you’re trying to animate.

2:58

With quick effects, you can add prebuilt entrance, exit, and emphasis animations to introduce basic motion and interactions to your project.

2:51

Learn how to create a 2.5D camera movement effect using only 3 images, some depth effects, and interactions.

5:46

In this project, we cover the horizontal motion of elements based on where in the document we've scrolled.

2:37

Learn how to give the appearance of depth using parallax motion based on your scroll position.

3:10

In this example, we'll animate a rotational card movement based on the position of your mouse as it hovers over the element.

6:27

Explore creating a horizontal progress indicator which scales as you scroll down the page.

2:50

In this example, we cover animating a navigation bar both in and out based on scrolling up or down on the page.

2:33

Learn how to create a trigger which fades and moves elements in as your scroll down the page.

4:38

Learn how to create a sequenced animation which animates multiple elements after the page loads.

4:56

Create a mouse click or tap trigger using one element—which upon clicking shows and hides a different element.

5:01