Difficulty with Flipbook animation on mobile breakpoint

Design help Animations & Interactions
1

Hi, please I need help to set up an interaction for a portrait breakpoint for a flipbook. I copied a flipbook interaction from here: Book with pages flipping interaction - Webflow

It works perfectly well for me on all other breakpoints with slight adjustments in regards of size units and dimensions (I used percentage instead of pixels for the move actions to keep the books centered at all times).

The structure of the book is as follows - each sheet has front and back side. When I click on the front side, the sheet rotates by 180 degrees, and it’s back side is on the left, and on the right side the front page of the next sheet is visible.

Unfortunately the template does not have interactions for mobile, specifically for portrait view. Normaly both pages of the book are visible and by clicking on either left or right page you flip forwards or backwards. But for the portrait breakpoint I need to set up the interaction in such a way, that only the current page is visible, and not the double page as with all the previous breakpoints:

  1. When I click on the cover, it rotates and reveals page 1 (back side of the cover sheet) and page 2 (front side of the sheet 1) is overflowing on the right.
  2. When I click on right half of page 1, the “book” moves to the left and reveals page 2, covering page 1 in overflow on the left.
  3. When I click on the right half of page 2, it rotates sheet 1 and reveals page 3, while page 4 is covered in overflow on the right.
  4. The same principles applies when clicking on the left half of any page, it just moves backwards.

I tried to set up the animation. In the cover divblock I inserted a flex wrapper with two divs - left and right. I managed to open the book (it was just small adjustment of the animation for higher breakpoints), but when I click on the right half of page one, and want to move the page 2 into view, the page 1 just “hits” the screen edge and kind of bounces back - it is not possible to move it out of view. Does anybody know what is the cause for this behaviour? Do you know how to solve it? Or do you have a simpler solution for the mobile breakpoint?

Here is my public share link:
[1]: Webflow - Gouranga Ášram
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

And here is the link to live site: Gouranga Ášram

Thank you
Petr

2

Hi Petr,

For elements moving off-screen and bouncing back, this typically occurs due to overflow settings or positioning issues. Here are some areas to check in your design:

The container element should have “overflow: hidden” applied if you want to prevent content from extending beyond its boundaries. Check that your viewport settings are correctly configured for mobile responsiveness. Also ensure that any absolute-positioned elements remain within their parent container’s boundaries.

For smoother animations, verify that your starting positions are within the viewport and that your interaction triggers are properly aligned with your scroll position. You may need to adjust your breakpoints or container dimensions to maintain proper element positioning across different screen sizes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I am aware of all these things, but the animation is quite complex and I can’t make the sense of it. I am fairly new to webflow. So if anybody takes a look and gives some suggestions, I will be very greatful. I am trying to work on it meanwhile.