In this tutorial, I will show you how to replicate this "split scroll" design, where sticky images on one side, are "reverse scrolling" as content on the other side is scrolling normally.
See the demo here:
- Works with any amount of images
- Works with the normal "Image element", so it's lazy-load compatible
- Works on desktop and tablet (could work on mobile too, however it's not ideal due to the narrow viewport)
- Performant animation
- No JS dependencies
- Uses containers
Let's get started!
First, import the template on the page where you want this
It's easier to start from the template for this tutorial.