Maintaining CSS blend mode / stacking context on text element during GSAP Tween

[Tulip781]

I am working on an animation effect using GSAP and facing a challenge with CSS blend modes. I'm hoping to find some guidance or solutions here.

 

Context:

 

In my web project, I have a text element styled with a CSS blend mode set to 'difference'. The text is designed to blend with a background image, changing color based on the background. Specifically, when the text (which is white) overlaps with a white part of the background image, it turns black, which is the desired effect.

 

Issue:

 

The problem arises when I apply a GSAP tween to this text element. As soon as the animation starts, the blend mode effect seems to disappear. I suspect that the tween might be creating a new stacking context, causing the blend mode to not work as expected.

 

Here's a CodePen of this example. In this example I set the GSAP tween after a 3 second timeout. I would like to maintain the blend mode effects visible at the start during my tween.

 

 

How can I ensure that the 'difference' blend mode effect on my text element is maintained throughout the GSAP tween?

 

Are there any specific GSAP animation properties or techniques I should use or avoid to keep the stacking context intact?

 

Is there an alternative approach within GSAP to achieve this effect without losing the blend mode functionality?

 

Thank you very much for your assistance!

See the Pen xxMegrJ by indymoguler (@indymoguler) on CodePen

[Rodrigo]

Hi,

 

I'm not an expert on blend modes, except that I should avoid them as much as possible, since they are terrible in terms of performance.

 

In this case the issue seems to be related to browser rendering and not GSAP, I forked your demo and added a simple CSS animation and the issue is still there:

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

 

Maybe you could try a different approach. One of our superstars @mvaneijgen created this thread a few days ago that could give you some pointers on the subject:

 

Hopefully this helps.

Happy Tweening!

[Tulip781]

Thanks Rodrigo, thanks for confirming this for me. If I can identify the CSS reason for this, using GSAP should still not affect the element? 

[Rodrigo]

4 hours ago, Tulip781 said:

Thanks Rodrigo, thanks for confirming this for me. If I can identify the CSS reason for this, using GSAP should still not affect the element? 

Not at all, keep in mind that GSAP is only updating specific styles properties during a specific amount of time, nothing more, so that shouldn't be a problem.

 

Happy Tweening!

[Tulip781]

Thanks Rodrigo, appreacite it. Been trying to figure out how to make this work all afternoon, no success yet. Will report back if i find anything.

[Rodrigo]

3 minutes ago, Tulip781 said:

Thanks Rodrigo, appreacite it. Been trying to figure out how to make this work all afternoon, no success yet. Will report back if i find anything.

No problemo!

 

Good luck and let us know if there's anything else GSAP-wise you need with.

 

Happy Tweening!

[Tulip781]

Thanks Rodrigo, I did actually have another GSAP question I was struggling with. Will open a new thread. Very grateful for the help 

[PointC]

Animate the .title-link class instead of the .marque parent and you should be good to go.

 

See the Pen 87842a7efa22c7a9384c9ec16e3d02db by PointC (@PointC) on CodePen

 

Happy tweening.

[Tulip781]

Hi Point C, thank you so much for the help. I'm soo grateful you've got this demo working. Unfortunately I need to have the animation on the marque element, as that is how i need the html setup to make my GSAP animation work. Notice in this example there are two marque divs of equal width, that is what i want to animate without removing the blend mode.

 

See the Pen oNmOoEm by indymoguler (@indymoguler) on CodePen

 

I tried moving the animation to the link element as in your example, but the problem is that each link item has a different width, so I am unable to create this infinite scroll effect.

 

Maybe i miss understand something, but I don't think that will work with this?

 

Thank you for taking the time to help me with this, i am so grateful. Been trying to figure this out all day

[Rodrigo]

Hi,

 

Just use the same approach @PointC already suggested (sometimes the simpler the solution, the better 😉) and use the Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Happy Tweening!

[Tulip781]

Thanks Rodrigo, when I try to animate the text items like this, it breaks the animation as each items is a different width. The reason there are two 'marque' divs with elements in, is because these are dynamically generated in my application to clone the list to fill the width of the screen. (each marque is a clone of the list)

 

Here is what happens when i apply the animation to each link element

 

See the Pen JjxVMxG by indymoguler (@indymoguler) on CodePen

[PointC]

Maybe get the width of the parent and move each target accordingly. 

 

See the Pen 8185fc373a73bca244860ae0db35d225 by PointC (@PointC) on CodePen

[Tulip781]

Point C - thank you so so much! It works exactly as I need here. I'm so grateful to you both for your time and energy.

 

Here was the final result of what I was after

See the Pen ExrJozj by indymoguler (@indymoguler) on CodePen

[Tulip781]

Hi PointC, just looping back to this. I opened your example in FireFox, and neither the tween or the blend mode appear to be working. I suspect this is to do with a firefox bug that calculates the width of flex items using vertical writing mode as 0. I tweaked the structure slightly to avoid nested flexs that using vertical writing mode to try and make it render correctly in FireFox.

 

I try to animate the link item as in your example, but to no success with the movement or blend mode. 

 

Do you have any idea why this is? 

 

See the Pen ZEwZwEg by indymoguler (@indymoguler) on CodePen

[Rodrigo]

@Tulip781,

 

Please keep this to a single thread. Right now you have two threads, basically covering the same issue:

 

Let's try to keep our focus in just one, which most likely will make it easier for everyone involved.

 

Thanks!

[Tulip781]

Apologies, Rodrigo. Noted. Will keep message to one thread. Thanks again for all the support