Animation
3D Bookshelf Scroll Animation in Framer
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
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
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
3D book component variants in Framer.
3D book component variants in Framer.
3D book component variants in Framer.
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.
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.
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.
3D bookshelf component variants.
3D bookshelf component variants.
3D bookshelf component variants.
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.
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.
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.
Scroll variant effect in Framer.
Scroll variant effect in Framer.
Scroll variant effect in Framer.
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.
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.
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.
