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.