Jump to content
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/

See the Pen PXqrXj by anon (@anon) on CodePen

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.

 

See the Pen NxVMBx by jonathan (@jonathan) on CodePen

 

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?

 

See the Pen dwYgVK by anon (@anon) on CodePen

 

Thank you for your help, Have a great day!

 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.