Bams Posted September 21, 2020 Share Posted September 21, 2020 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 More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 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 More sharing options...
Bams Posted September 22, 2020 Author Share Posted September 22, 2020 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 So weird!!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 22, 2020 Share Posted September 22, 2020 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. 1 Link to comment Share on other sites More sharing options...
Bams Posted September 22, 2020 Author Share Posted September 22, 2020 Thanks @ZachSaucier, I'll let you know.. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now