Jump to content
Search Community

Works on Firefox only

Bams test
Moderator Tag

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.

thanks 

 

 

 

 

 

 

q8eNg4mY3K.zip

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:

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

 

Another thing you could try is replacing the following:

// replace this
gsap.to(
  this.childsListArray[0],
  {
    duration:10,
    opacity:0
  }
)

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

 

Code

    console.log(
      "force opacity before"this.childsListArray[0].style.opacity
    );
    
    this.childsListArray[0].style.opacity = 0.5;
 
    console.log(
      "force opacity after"this.childsListArray[0].style.opacity
    );

 

Result

chrome_zlLYGQCb3d.png

 

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.
×
×
  • Create New...