Jump to content
Search Community

Trouble with masks

TankSinatra test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

See the Pen RwMOgyw by marcel_gallois (@marcel_gallois) on CodePen

Link to comment
Share on other sites

Thank you so much!! @mvaneijgen

This guide and letting me know that I needed to use clip paths helped me solve it. I was able to achieve the exact result I wanted using the video guide and the modified CodePen you have posted. I think the key to getting a seamless loop (along with stagger and repeatDelay) was setting the timeline up with a "from" tween that used the opposite side of the "to" tween clip path. The skins aren't layered on top of each other anymore during the animation with this method as well.

Cheers!

See the Pen XWEwbqj by marcel_gallois (@marcel_gallois) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...