Paper fold effect for slider

[namisuki]

Hi There!

 

I'm looking to create a slider that has a paper fold effect. the concept is, when the user clicks on the image that is visible on screen, it folds like a paper and then goes back of all the images and the image that was behind the visible image would show up on the screen. Each time the user clicks an image the same animation happens, when the user reaches the end of all the images, the loop again starts. (please refer my codepen to understand the effect further)

 

i was able to partially achieve that with my codepen. however i need three things done with it, if possible.

 

1) could you please help me make the animation smoother? like the image first folds horizontally and then folds vertically then the z index happens.

 

2) i'm  a newbie to gsap so i got whole bunch of code sitting there to make this effect happen...could you make the code simpler but still achieve the desired effect and functionality?

 

3) my slider fails in the z-index part in firefox, is there a possible fix?

 

Thank you so much.

See the Pen RERNZr by namisukichin (@namisukichin) on CodePen

[mikel]

Hi @namisuki,

 

This is a quick fork of my last pen on this subject.

The conditions are not completely correct (1st picture twice ??).
For the second run and the following, the backface-visibility has to be 'repaired'.

 

See the Pen ebeeGv by mikeK (@mikeK) on CodePen

 

See you next year ...

Mikel

 

Problems solved - already this year.

[namisuki]

Thank you so much for your reply!! you're really helpful.

 

LOL i'm here after last year!!!

 

actually thats exactly not the effect i'm trying to achieve.

 

The first image is not shown twice it's actually same image url used in first and 3rd image that is why it looks like first image shown twice. (thats not necessarily required)

 

the effect is like images are stacked in z index. when the user clicks the first image it does the 'closing' fold animation then it moves to the last in the stack. then the second image is shown withoit any animation which makes it look like the first image is removed form the stack and obviously the second has to be seen.

 

i'm doing this in my attached pen in the OP. but the long code, firefox issue and the effect is the problem.

 

Thank you so much, Happy new year!!! :D

 

 

[mikel]

Hi @namisuki,

 

another year, another try ...

 

See the Pen gZXEzJ by mikeK (@mikeK) on CodePen

 

Happy folding ...

Mikel

 

 

 

 

[namisuki]

Hi @mikel

 

That is exactly the effect!!! another year another success man! more success to be on your way.

 

Thank you for your solution, you're pro.

 

PS: if i need to add or remove images to the above? how do i go about that?

 

 

[mikel]

Hi @namisuki,

 

I have integrated another motif and for a better overview in the code an array for the motifs:

 

var images = [
  "url('https://tympanus.net/Development/BookBlock/images/demo1/3.jpg')", // tiger  images[0]
  "url('https://tympanus.net/Development/BookBlock/images/demo1/4.jpg')", // deer  images[1]
  "url('https://tympanus.net/Development/BookBlock/images/demo1/1.jpg')", // elephant  images[2]
  "url('https://tympanus.net/Development/BookBlock/images/demo1/2.jpg')", // elephant  images[3]
];

 

See the Pen OrQzPe by mikeK (@mikeK) on CodePen

 

Some hints:

• the first motif is defined in the css
• the 2nd motive under iClick === 1 
• ...
• initial = current
• next = next
• last = the previous one that disappears under the stack

 

Add another motif:

• complete the array with the url
• an additional condition if ( ...
• adjust in the previous the next image
• adjust:   if (iClick> 3) iClick = 0;    // "3" = total number of images - 1

Delete a motif:

• delete the condition for this motif
• adjust in the previous the next image
• adjust:   if (iClick> 3) iClick = 0;    // "3" = total number of images - 1

Just a little trial and error ...
Good luck

Mikel

 

 

[namisuki]

Apologies for late reply!!

 

That wraps it up!! You rock!! Thank you so much.

[RolandSoos]

 

@namisuki, You should add -webkit-backface-visibility: hidden; when you use backface-visibility: hidden; in this example. This will fix rendering issues in Safari browsers.

 

See the Pen REzJXX?editors=0110 by mm00 (@mm00) on CodePen