Jump to content
Search Community

Page flipping - book with one side only

rax test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

First of all, let me start by saying that I have never used GSAP before. I came across it when searching about page flipping animations.

 

I want to create a page flipping animation which is responsive and the "book" has one side only. Many of the examples I found so far show a book with both left and right sides, but in my situation I only need one page to be displayed. In order to flip, the user needs to click on the button so no need to drag the page around.

 

Could you guys point to how I should do that please?

 

Thank you

 

PS: I have added a Codepen which is similar what I want, but:

1. it's not responsive;

2. the book still has 2 sides. I'm not sure how to get rid of the page on the left.

See the Pen LgQoOb?page=1& by weyseal (@weyseal) on CodePen

Link to comment
Share on other sites

I'm not sure I understand the question. To only have one side of the book you'd just need to adjust some of the CSS  classes that style the book. Making it responsive would involve creating the book with percentages instead of fixed width pixels. Or using fixed width sizes for various breakpoints would work too. Most of what you're asking falls outside the scope of this forum.

 

If you have specific GSAP questions or problems as you continue with your project, we're happy to help.

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...