GSAP ?

[plvbroker]

Hi 🖐

My problem is probably related to angular but I give it a try here!
I have a repo : https://github.com/plvbroker/public-lab/tree/firebase/src/app

It consists of a parent and 3 childs generated via *ngFor
My gsap animation works in firefox but not in chrome or edge.

it's weird because we can see the style changing dynamically in the console, but nothing applies in html (see .gif)

Is it possible that the way tailwind works, causes trouble like this?
Let me know if you want more infos.

thanks

[paulpopus]

Well I couldn't test it 1:1 with your setup due to firebase permission errors but just by adding a div and a child I can change the opacity of them both using an inline style which by the way takes precedent over CSS styles so it wouldn't be an effect of Tailwind anyway.

My guess is that you're not applying the opacity changes to the right component. It could also be an extension of yours doing something, have you tried viewing it in incognito/guest mode with no extensions?

[plvbroker]

Thanks @paulpopus for your advices, I'm going to double check the component

I'v changed the rules if you want to try again

[paulpopus]

Okay in that case it seems that the difference in behaviours between the browsers is probably attributed to the default treatment of the custom web element.

By adding display: block to the app-child you can fix this issue.

So having this app-child in src/app/parent/parent.component.html should fix it:

<app-child
  [project]='project'
  class="block"> </app-child>

On another note I recommend removing your database/API keys from the repository and generate new keys so you don't have issues with bots or unwanted people using your credentials.

[plvbroker]

It works!! 🎉

And thank you about my security issues, I'll generate new keys and remove my credentials from the repo