Image Shaking Issue with Swiper and GSAP

[marc2023]

Hello,

I'm attempting to create a "pseudo lightbox" using Swiper and GSAP. When the user clicks on the Swiper slides, the Swiper transforms and occupies the entire screen. Once transformed, if the user clicks again, the Swiper returns to its initial values.

The issue is that, sometimes, during the transform animation, the images within the Swiper start shaking. Rarely this problem occurs on the first slide. Therefore, please navigate through the slider to observe the "bug."

Thanks in advance.

See the Pen qBgeLyL by marcespanol (@marcespanol) on CodePen

[GreenSock]

That looks like a Swiper.js issue, not related to GSAP. From what I can tell, Swiper adds CSS transitions, so that's interfering with things. So GSAP does its work of changing a property but then the CSS transitions say "nope, I'm not gonna let that happen...I'll drag that out over X seconds". 

 

Here's just a quick fork where I apply a * { transition: none !important; } CSS rule:

See the Pen qBgewxJ?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Swiper is not a GreenSock product, so we can't really support that, sorry. But hopefully this gets you going in the right direction. 

[marc2023]

Thanks for your response.
 

Quote

I apply a * { transition: none !important; } CSS rule

 

With this addition, I don't see any change regarding the related issue.

But since you pointed out that it's a Swiper's CSS issue, I tried the "cssMode" parameter from Swiper API: When enabled it will use modern CSS Scroll Snap API. It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations.

Setting this parameter to true and using a faster animation duration (the 3 seconds of the first Codepen were just for debugging purposes) seems to work, not perfect as possible, but it works.

I've copied a new Codepen with the result:

 

See the Pen yLZmdre by marcespanol (@marcespanol) on CodePen

Edited December 19, 2023 by marc2023
Not perfect solution clarification