Scrolltrigger in combination with display:contents;

[IndM]

I need to create a wrapper around my column so scrolltrigger knows where the element is since you cannot place a trigger on the animated element.
In this case, I use the div with animation-wrapper as my trigger.

Since the columns are a flex-child, I have to use display: contents on the animation-wrapper. So the dom thinks this is a child as quoted here:

Quote

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

But due this, it seems that scrolltrigger is having issues finding that element. While the element is still available in the dom tree.

I've created an demo for it.

See the Pen eYXGjZg by indy-meermans (@indy-meermans) on CodePen

[akapowl]

I don't think that is a ScrollTrigger problem to be honest - but more an issue about how display: contents works in the browser.

If you set the start of your ScrollTrigger to something like '100px top' instead of 'top top' (because in your case it already has hit that spot thus the onEnter will not fire when starting to scroll) and inspect it in your browser's dev-tools, you can see the properties on it inline being changed as they should. So ScrollTrigger does exactly what it is supposed to do.

But:
 

Quote

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.“

Source:

https://medium.com/@zylberberg.jonathan/what-is-css-display-contents-property-and-how-it-can-solve-some-interesting-problems-4fdff7363777

Since that is the case, i.e. it not generating any boxes, you won't be able to set most properties on it; neither via CSS nor via JS.

Here is an example without any GSAP - neither the CSS opacity: 0, nor setting it via JS will do anything.

So I'm afraid you will have to re-think your approach on the styling of your layout a bit.

See the Pen QWoqZxP by akapowl (@akapowl) on CodePen