namisuki

Booklet image slideshow effect with GSAP

Recommended Posts

Hi Gsapians!

 

Could you please help me achieve the booklet flip image slideshow animation just like in the link below. I would like to implement that in my project but i thought it would be better if i get a code snippet for achieving just that with GSAP rather than including the whole plugin. I know it is simple in GSAP than downloading a plugin for that but i don't know the way to come around with a technique.

 

https://tympanus.net/Development/BookBlock/

Share this post


Link to post
Share on other sites

Hello @namisuki and Welcome to the GreenSock Forum!

 

To make an image slider it would have many parts.

 

As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property.

 

 

Happy Tweening !

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi @Jonathan

 

Thank you for your reply, it helped me a lot! I got the below pen working well giving the booklet effect, but the problem is the second page kind of goes below the first page when turned. may i know how to overcome on that, so that it feel as if a page is turned?

 

 

Thank you for your help, Have a great day!

 

Share this post


Link to post
Share on other sites

Hi @namisuki,

 

Of course, @Jonathan will offer a perfect solution.


Here is a version tweening z-index:

 

 

Happy flipping ...

Mikel

 

 

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Yes, it looks like @mikel already advised what i would have.. to use z-index to control the stacking of the active pages.

 

Some resources:

 

CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

The Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

Happy Tweening or Flipping! :)

  • Like 6

Share this post


Link to post
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.