Example 1

Welcome to this demo!

After you read this.

You'll read this

... and then this.

Pretty cool, huh? 😎

Example 2

With svelte-reveal you can create custom transitions that get triggered when the element becomes visible.

You can get some really nice effects by playing with the many options this library offers.

In particular, elements can use the following transitions:

Example 3

At this point the content of this demo should be long enough to be out of view when you first load the page. As a result, the Intersection Observer kicks in and adds the transitions only when the elements are in view.