Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Works on Firefox only

Recommended Posts

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)


Let me know if you want more infos.









Link to comment
Share on other sites

Hey Bamas. It sounds like a browser rendering issue to me. Chrome has had some rendering issues in the latest live version. 


One thing you could try is adding will-change: opacity to your element's CSS.


Another  idea is to try forcing an update. This is obviously not optimal but it might help us determine the issue:

    duration: 10,
    opacity: 0,
    onUpdate: () => {
      this.childsListArray[0].style.display = "none";
      this.childsListArray[0].style.display = "block"; // or whatever the normal display is


Another thing you could try is replacing the following:

// replace this

// with this
this.childsListArray[0].style.opacity = 0.5;

Let us know the results of the tests above.

Link to comment
Share on other sites

Thanks so much for your help @ZachSaucier


Unfortunately, none of your three tips worked ūüė•

(I've commited the changes in the repo..)


For your last tip, I've logged ' the childsListArray.style.opacity but it does not seem to exist in the beginning..



      "force opacity before", this.childsListArray[0].style.opacity
    this.childsListArray[0].style.opacity = 0.5;
      "force opacity after", this.childsListArray[0].style.opacity





So weird!!!




Link to comment
Share on other sites

5 hours ago, Bams said:

the childsListArray.style.opacity but it does not seem to exist in the beginning..

That's not surprising because it can only read inline styles. 


I don't know what to tell you. It's definitely not GSAP's fault since the value is being set correctly. I hope you're able to figure out the issue soon! If you do figure it out, please post back here so that others might be helped in the future.

  • Like 1
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.