Jump to content
Search Community

Booklet image slideshow effect with GSAP

namisuki 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 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

Link to comment
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
Link to comment
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!

 

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