Scrolling Demo

A quick scrolling demo in Svelte designed to show off Svelte transition usage combined with Mutation and Intersection Observers for controlling scroll areas. Svelte removes and adds elements to the DOM when using transitions, and this is not always desirable.

Here we can see:

• The use of CSS Grid to allow transition elements to occupy the same space whilst transitioning.
• Mutation and Intersection Observers allowing us to track our position in a Svelte transitioned scrollarea, to accomplish tasks such as changing backgrounds based on what is visible on the screen.

How to Run

1. Install deps: yarn

2. Run: yarn dev