Rich - another

Hi Cassie Thank you for your assistance. I was looking for the ideal connection between GSAP and Swiper-with-fade. However, in the meantime, I have managed the integration by relocating the part required fade-effect from Swiper. For GSAP trigger I use a React useState updated by Swiper. All the best

In my previous comment, I was wrong with the Swiper. The source of the problem is the fade effect. Once fade effect is employed it blocks GSAP. I am not sure where the boundary lies between GSAP and Swiper here. Instead of slide effect I'm looking for a fade effect. Can you help me please to bridge the gap? component > Swiper.js: effect="fade" fadeEffect={{ crossFade: true }} Thank you

Regarding Swiper, I've just put together another sandbox for illustration, but it has turned out that works perfectly So there must something be wrong in my production code. https://codesandbox.io/s/immutable-bird-t4ude?file=/components/Swiper.js All the best

Many thanks @OSUblake

Many thanks @OSUblake I really appreciate that top on your concrete implementation in codesandbox, you have also provided all the key strategies in general. Based on your example I could manage to work the production version apart from a consistent trigger. The whole animation is embedded into a swiper and triggered by its onSlideChange() function. This function consistently triggers a console.log() but not the GSAP anim. GSAP anim is triggered only by the very first slide. Before I'd provide a codesandbox example I'm enquiring if this is a returning issue with a known answer maybe? Regarding the target position, yes it would be the container's center. I've managed to achieve it with "left/right/transform-translate" animation - based on your example - however, am interested in your solution if it is more efficient please. Thank you

Hi Reading through a significant amount of API docs and forum posts in the last three full days, I haven't found a solution for a situation where playing animation then reverse it back would happen together as a single unit / cycle. Would you please put me into the right direction how to achieve this? The environment is React (NextJS), and the trigger is a user trigger (swiper in production, but for simplicity it is just a button here). What I am looking for your help please, is that the animation remains paused on page load. And once the user clicks the button, - all circles - at the same time - move and shrink into the center - then go back to their original positions and original sizes. The reverse flow is also part of the VERY SAME user triggered animation (NOT a separate / other one). https://codesandbox.io/s/vigilant-waterfall-urfq1?file=/pages/index.js Many thanks Rich