Jump to content
namisuki

Paper fold effect for slider

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

Hi @namisuki,

 

another year, another try ...

 

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

 

Happy folding ...

Mikel

 

 

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

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?

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

 

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Apologies for late reply!!

 

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

  • Like 2

Share this post


Link to post
Share on other sites

 

@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

 

  • Like 4

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.