Jump to content
Search Community

mix-blend-mode in <div>

Oliver16Years test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Applying the blend mode to the container div seems to fix it.

 

Yes it fix it, but what if I want to put more elements with different blend modes into the container? This is not a big deal with this unsupported browser feature at the moment, but what if I want to target Chrome to make a GUI or PhantomJS to render animation frames. Would be nice if I could shake or zoom the entire ad in the distant future. :)

Link to comment
Share on other sites

Yes it fix it, but what if I want to put more elements with different blend modes into the container? This is not a big deal with this unsupported browser feature at the moment, but what if I want to target Chrome to make a GUI or PhantomJS to render animation frames. Would be nice if I could shake or zoom the entire ad in the distant future. :)

Couldn't you just wrap the image in a different div and apply the blend mode to that?

Link to comment
Share on other sites

Same result: no matter how deep is the tree structure of the divs. If I tween one of the parent divs all the children loosing it's appearance. Strange because in Chorme dev tools / Elements view / Styles tab shows the right css... Is it a browser bug?

But you could put the image in a div, apply the blending mode to that div, and then animate that specific div.  

 

I don't think it's a Chrome bug; the behavior is the same in Safari and Firefox.

 

If the div has a background color or background image there's no issue though: 

See the Pen XKJdPP by ohem (@ohem) on CodePen

Link to comment
Share on other sites

I don't understand this. We need to give a background color to the container to use blend mode in it? If I comment out the background:red; in your code, the blend mode switching back to normal. Then why the blend mode working when we not moved the container yet?

Thanks anyway Ohem. Forget it, it is not important. I won't use DOM blend modes while IE is still used. 

Link to comment
Share on other sites

  • 6 years later...

Hi @Chris. If you'd like some help, please provide a very simple CodePen or CodeSandbox that clearly demonstrates the issue. 

 

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. 

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...