About The Resource

There are two components that we need for this scroll animation: a book component that has two variants—closed and open—and a bookshelf component that wraps multiple book components

To create the 3D effect of the opening and closing of the book component, I simply used 3D transforms to project the book cover in 3D space.

Within the bookshelf component, which wraps six book components, I created six different variants, where in each, a new book is being opened.

At the end, all I had to do was trigger these variant changes with a scroll animation technique known as the easiest scroll animation technique in Framer (explained step-by-step in this video).

Basically, I placed the bookshelf in a sticky frame and added a scroll variant effect to the component to trigger the variant switches with hidden trigger frames.

So, as soon as we start scrolling down the page, the bookshelf will stay in our viewport and switch through its variants, resulting in an amazing scroll animation.