Stacked Slider forward and reverse animations

Hey there, I’m trying out a proof of concept for a fullscreen stacked slider and I’m running into issues with UX. I’m basing it off of your “Fullscreen Slider” demo and I was wanting the slider to advance through a progression through swiping (envisioning on phones). The slide up animations work great for advancing through the slides when swiping, but when I try to go backwards through the slides, they still slide up, even though they are returning to the previous slide. Is there a way to set a different animation for going to previous slides? I tried switching to inline, but those only swipe horizontally and not vertically. I hope my question makes sense.

UPDATE 1/2/22
I just figured out that I could use the custom properties (variables) to build out scroll effects between slides. I made my “Entrance” transform translate(0px, 0px) and my “Exit” transform translateY(calc(100vh * var(--x-slide-balance))) and that accomplishes the effect I was looking for. Awesome!

Hey @bobbybosler,

Thanks for writing in! It is good to know that you have figured out a way to achieve the effects that you wanted for your slider. We really appreciate for sharing that information.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.