One interesting way to use in-view Interactions is to cause content on your page to fade into view (or fade out of view) as the user scrolls up and down.

This can be done easily by creating an interaction with an in-view trigger. This type of trigger will cause an event to occur when the element is at least 50% in view of the browser window.

(If this is your first time exploring TIME Sites' Interactions framework, you may want to familiarize yourself with it first!)

Overview

Overall, the steps you’ll take to build this effect are:

Select the element on the page that you want to fade-in when the user scrolls to it.
Hide it in its default state by setting its opacity to 0.
With the hidden element still selected, create a new interaction. Set the trigger type to "In View", and "Turn On".
While in interaction mode, set the element's opacity to 100.

Select the Element and Hide It

In this example, we will use a simple text element on the page. Start by selecting it:

Then, we will hide it in its default state by opening the Filters Panel, and reducing its opacity to 0:

Create the Interaction

With the element still selected, create a new interaction via the Interactions Panel.

Tip: If you are ever having trouble locating an element that's hidden on the page, or has been moved off the page entirely, remember that you can always use the Page Structure Panel to find it and select it.

In the Interactions Panel, set the trigger type to "In View" and "Turn On":

Then, while still in interaction mode, set the element's opacity back to 100:

Exit interaction mode, and preview the effect to make sure it looks right by starting at the top of the page and scrolling down.

Some Tips

Remember that you can use the Transition Panel to control how fast the animation occurs, how much of a delay it has, and the tween or "shape" of its velocity. This can give your animations a lot more personality.
If you have multiple elements that you want to fade in sequentially, you can use the Transition Panel to slightly offset each element's delay time, then create a single in-view interaction for all of them. (This is a bit easier than making a separate interaction for each element.)
Try using the Transform Panel to add a little left-right movement to the fade-in animation, by adjusting the Transform-X value a bit.
The in-view trigger is very flexible -- it can be used to trigger an interaction when an element appears in the browser window from the top, the bottom, or the side!

Important note: In-view interactions are not supported on older versions of some browsers. In these cases, in-view interactions will always display their "on" state.