Problem GSAP with css mask

[testertr]

hi everybody,

i want fixed bg image above transform (scale) mask when scroll with gsap.

 

when i don't use gsap like seems: (but not enough for my idea)

 

 

 

but when i use gsap like seems: (absolutely i don't want this)

 

 

 

i want bg image fixed and above mask when scroll scale tranform.

 

 

 

 

 

can u help me please. 

i'm sharing my codes....

 

[GSAP Helper]

That looks like it's probably just a browser rendering thing related to stacking contexts (completely unrelated to GSAP). It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[testertr]

...........................................................

[GreenSock]

As per W3C Transforms Spec:

Quote

 

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d:

overflow: any value other than visible.

filter: any value other than none.

clip: any value other than auto.

clip-path: any value other than none.

isolation: used value of isolate.

mask-image: any value other than none.

mask-box-image-source: any value other than none.

mix-blend-mode: any value other than normal.

The computed value of transform-style is not affected.

 

You can completely remove GSAP and then add any CSS transform (or will-change) and you'll see exactly the same effect.

 

I don't have time at the moment to try to hunt down alternatives, but perhaps SVG instead? Or literally create a white PNG that has transparent areas that you lay on top of the image and animate that (so no mask at all, but it just looks like it). 

 

I hope that helps. 

[testertr]

10 hours ago, GreenSock said:

As per W3C Transforms Spec:

You can completely remove GSAP and then add any CSS transform (or will-change) and you'll see exactly the same effect.

 

I don't have time at the moment to try to hunt down alternatives, but perhaps SVG instead? Or literally create a white PNG that has transparent areas that you lay on top of the image and animate that (so no mask at all, but it just looks like it). 

 

I hope that helps. 

it's not solved my problem. 

 

[mvaneijgen]

Seems like an issue with Chrome, in Safari Version 16.0 it works fine. Are you sure every property is supported in Chrome?

https://caniuse.com/css-masks

 

I've never used the masked property, but why not use an transparant PNG with a white overlay? That works in every browser. Oh lol that's what @GreenSock already suggested. Yeah sorry this isn't a GSAP issue, you just have to go an alternate route to get to the same result. The mask property doesn't seem supported enough. 

[testertr]

27 minutes ago, mvaneijgen said:

Seems like an issue with Chrome, in Safari Version 16.0 it works fine. Are you sure every property is supported in Chrome?

https://caniuse.com/css-masks

 

I've never used the masked property, but why not use an transparant PNG with a white overlay? That works in every browser. Oh lol that's what @GreenSock already suggested. Yeah sorry this isn't a GSAP issue, you just have to go an alternate route to get to the same result. The mask property doesn't seem supported enough. 

Can you write me example code with gsap for create fixed image above animated mask please.

I Cant't solve this problem 😕

[mvaneijgen]

No I can't, because you'll have to fix your assets first, you have to create a transparent PNG image of your QR code where everything black is transparent and the rest of the image is white. This has nothing to do with GSAP and is not something I have time to fix for you. 

[testertr]

On 12/13/2022 at 12:59 PM, mvaneijgen said:

No I can't, because you'll have to fix your assets first, you have to create a transparent PNG image of your QR code where everything black is transparent and the rest of the image is white. This has nothing to do with GSAP and is not something I have time to fix for you. 

Dude check please my mask image tranparent and not everyting black.

[Cassie]

Heya - SVG is more cross browser friendly 

See the Pen mdKZJVV?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

9 hours ago, testertr said:

Dude check please my mask image tranparent and not everyting black.

https://i.ibb.co/f2zpt1S/qr-mask.png

You'd invert that (what's white now should be transparent, and what's transparent should be white) and then just plop that over the image. 

 

Again, this has nothing to do with GSAP. These forums are for GSAP-specific questions. Unfortunately we just don't have the resources to provide free general troubleshooting for CSS/browser questions (please read the forum guidelines). 

 

@Cassie's solution is excellent, of course. 👍

 

I hope that helps get you going in the right direction. Happy tweening!