Hey everyone,
I have a page turn set up Webflow - book
As of now, it works fine, but what I would like to do is have the pages turn on scroll. So, the user would scroll into the section, and the section would be sticky. Then, as the user scrolls, the pages would turn. Then, when finished, they would scroll out of the section.
I have been trying to figure this out all day, and still can not get it right. Any help you can offer will greatly improve my level of sanity…
This is totally doable! Here’s the approach:
Structure:
- Create a wrapper section with enough height to allow scrolling (e.g., 300vh or more depending on how many pages you have)
- Inside that, create a sticky container set to
position: sticky; top: 0 with 100vh height
- Your book/pages go inside the sticky container
Interaction:
- Create a “While scrolling in view” interaction on the wrapper section
- Set it to animate your page elements based on scroll position
- Map the rotation transforms of each page to different scroll percentages:
- Page 1 rotates from 0° to -180° at 0-25%
- Page 2 rotates at 25-50%
- And so on…
Key settings:
- Animation boundaries: 0% to 100% (top of section to bottom)
- Make sure “Smoothing” is set to a comfortable value (50-100%)
The trick is making sure your wrapper section is tall enough to give users time to scroll through each page turn. If you have 4 pages, you might want 400-500vh of scroll space.
Let me know if you need help with the specific keyframes!