Inline Slider Exit/Enter scroll effects

[turnkeydigital]

Hey there -

I’m using an Inline Slider element to try to accomplish a bit of a creative slider on the Entrance and Exit scroll effects.
This is a rough copy of what I am trying to achieve:

I’d like for each slide to scale down a bit at each step, is that possible? Here is what I have achieved thus far, but it’s not quite right. The slides to the right of the current slide are overlapping incorrectly, and the size is only scaling down once on exit:

Here are my current Entrance/Exit scroll effects:
Exit = scale3d(.8, 0.8, 0.8) translate(calc(100px * (var(–x-slide-balance) * -1) * clamp(1, var(–x-slide-distance), 2)), 0px)
Entrance = scale(1, 1) translate(0px, 0px)

I’m not sure what I’m trying to accomplish is even possible. Any guidance would be appreciated.
Thank you!!

[mircotripoczky]

Ingenious approach imho by using the “–x-slide-balance” var. I’m working on something like that at the moment as well, just that I only need 3 slides visible so I’m not in need of scaling down a bit at each step.

But for the overlapping problem I’ve added some css to the page which worked for me:

/* previous and next slide */
.x-effect-exit {
  z-index: 0;
}
/* current slide */
.x-effect-enter {
  z-index: 1;
}

Maybe that helps at least to fix that overlapping.

best regards
Mirco

[mircotripoczky]

Just another idea. If you also use the --x-slide-distance var for a scale3d calc it may work to scale the other slides step by step.

I also stumbled across a way to calculate the z-index by using some js. Look here: https://stackoverflow.com/questions/2024124/how-to-calculate-the-effective-z-index-of-an-html-element

[ruenel]

Hey @turnkeydigital,

Please apply the suggested solution by @mircotripoczky.

@mircotripoczky:
Thanks for chiming in! We really appreciate it.

Best Regards.

[turnkeydigital]

Hey @mircotripoczky thanks for your input on this!

Unfortunately, adding a calc to the scale3d() caused the scale to not happen at all.
Also, adding the z-index on exit and enter did nothing as well, no matter what I set the z-index number to.

@ruenel, have you tried this strategy or would you suggest something different that I’m missing?

Currently, here’s what I have on exit for each slide:
scale3d(calc(.8 * var(–x-slide-distance)), calc(.8 * var(–x-slide-distance)), calc(.8 * var(–x-slide-distance))) translate(calc(100px * (var(–x-slide-balance) * -1) * clamp(1, var(–x-slide-distance), 3)), 0px)

And upon doing that, I’ve lost it all. No scaling, no translate on the x-axis.
Rawrrr.

[ruenel]

Hey @turnkeydigital,

Can you please provide us with the URL of the page where we can find this slider so we can check? It would also really help if we can log in to the site and check those slide element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[turnkeydigital]

Hey @ruenel!

Here is the URL where the slider is located: https://tridentmf.wpengine.com
I’ve provided login credentials within the secure note, you may access and make changes as needed.

Thanks!

[turnkeydigital]

Hi @ruenel,

Just a friendly followup on this. Let me know your thoughts. Thanks!

[charlie]

There was - instead of a -- in two of your variable usages. That might be enough for you to figure out the final step. If not, let’s start by making this less complicated actually. Try setting up a looper either through a parameter group[] or just setup a post looper so we only need to worry about one “Slide” element. That way we can test if the exit effect transform is working properly. I’d encourage you to checkout Modern Slider too, the Perspective slider is the most similar to what you are trying to do.

Let us know if this helps.