Hi everyone! I have been trying to recreate an effect that I saw on the League of Legends website, where a character has "skins" that are cycled through and showcased. I am trying to recreate this effect in GSAP and though I have come very close, I still have some issues. I know this is possibly outside of the scope of what this forum is intended for, but I would be incredibly appreciative of any input or a push in the right direction.
As you can see in the CodePen I have provided, I am able to cycle through the skins using a very basic mask (with background: inherit), but problems arise when the background isn't a solid color (see pen, the background is moving with the masks due to inherit). There is also an issue with Safari that is causing part of the animation to do some very unexpected things (https://www.youtube.com/watch?v=hXoaBFWQsQY).
I have been messing around with this for several hours over the course of the last couple of days and every time I think I get it, another issue arises.
Thank you in advance,
-Tank