The "intersect" event

This is a custom event for use by developers who have experience of using CSS for animation effects. If you do not know how animations work in CSS yet, you should get familiar with them before reading this, otherwise you will get confused. You need to (at least) have used the CSS transition, transform and opacity commands in practice. You will need to know those commands to get any benefit from this new event. It would also be beneficial to grasp the "animation" commands of CSS too, if you intend to get fancy with your animations. Just try working with them and experiment until they make sense... Do that first and then revisit this page.

This event implements the JavaScript intersection observer API. Behind the scenes it sets up native intersection observer events when they are required. Arguably, that is not the easiest JavaScript thing to get your head around, so we have put an implementation into ACSS to hopefully make it a bit simpler to use in your projects. The concepts are exactly the same.

"Intersected" means that the element has intersected with the visible viewport, and at least a part of it is now on the screen somewhere.

In essence, it allows things to happen when elements become visible to the user. Ie. you are scrolling down the page and at a certain point down the page an element becomes visible to the user, and then you want something to happen. You do not want it to happen when the element is "off the page" and not visible to the user, so you delay it until the element has intersected with the viewport that is visible to the user.

That feature is already built-in for ACSS components via the "render-when-visible" option. This delays the rendering of the component contents until actually needed. This can greatly enhance page performance if you have a lot of components drawn further down the page. Continue to use the "render-when-visible" if you want to draw a component only when it becomes visible, because that is simpler that using the intersect event.

But if you need this delaying effect for an individual element, such as an image, a p tag, or a div tag, or anything that is not a component, then the intersect event is the thing to use.

Maybe you want an image to load and fade in only when the user arrives at the place on the page where they can see it. This could give you a massive benefit when it comes to page performance, especially for pages with lots of images, and additionally gives a page a more dynamic feel. It is recommended to do this, if you can, for all large-ish images. As expected, you will definitely see a big difference in page performance.

Maybe you only want some text to animate into place when the page scrolls to it. There is no point in the text animating into place if the user cannot see it...

These are all things that the intersect event can handle.

There are several options for the "intersect" event, and these will be taken up in sequence on this page, from basic to advanced.

The first example is a basic implementation of the intersect event, to slide some text onto the page when it is scrolled to.

Scroll down the HTML in the editor to the bottom, and the text will display.

Basic intersect event

As in all the ACSS examples, please note that you should find your own best way to implement the HTML and CSS. You should adapt your style and technique of using classes and attributes according to your requirements and do whatever you think is best based on the current knowledge you have. The above example can be written in lots of other ways. By all means do copy/paste it, but by taking the time to understand how it works you will discover that you can probably write it in a better way.

If you want to assign classes when elements are rendered, you could do this - you don't need the intersect event. Bear in mind that the observe event does not respond to scrolling, which is why the intersect is better when scrolling is involved:

body:init {
    render-before-end: "<div class='myDiv'>Hi there</div>";
}
.myDiv:if-completely-visible():observe {
    add-class: .noOpacity;
    remove-class: .partialOpacity;
}
.myDiv:not-if-completely-visible():observe {
    add-class: .partialOpacity;
    remove-class: .noOpacity;
}