3D Bookshelf Scroll Animation in Framer

Copy component

3D Bookshelf Scroll Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

3D Bookshelf Scroll Animation in Framer

This is a 3D bookshelf scroll animation created in Framer, inspired by an amazing concept by Zhenya. Feel free to remix the project and see how you can build something like this without writing any code.

image of Nandi Muzsik
profile image of Zhenya Rynzhuk
image of Clement Lionne

Created by

,

and

3D Bookshelf Scroll Animation in Framer
3D Bookshelf Scroll Animation in Framer
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

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 in Framer

3D bookshelf component variants.

3d bookshelf component variants in Framer

3D bookshelf component variants.

3d bookshelf component variants in Framer

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

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

  • Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation

    Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation

    Layered zoom scroll animation with overlapping urban and portrait imagery

    Image Zoom Scrolling in Framer

    Animation