Aitor Posted July 12, 2021 Share Posted July 12, 2021 Trying to animate a radial gradient background in a loop. The background has three radial gradients: background: radial-gradient(100% 102.5% at 16% 80%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 102% at 80% 20%, rgba(0, 133, 255, 0.76) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(100% 100% at 20% 80%, rgba(255, 245, 0, 0.76) 0%, rgba(255, 255, 255, 0) 100%); It works but the first iteration doesn't take the initial values set it in CSS file. It seems to animate from 0 values. Any help appreciated. Thanks. EDIT: embedded codepen doesn't work well in firefox but it works in Chrome See the Pen gOmNVRP by aitormendez (@aitormendez) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 12, 2021 Solution Share Posted July 12, 2021 Hey there! 1 hour ago, Aitor said: It seems to animate from 0 values. I'm not sure what you mean by this - the demo I'm looking at doesn't seem to be broken (but there's not a clear distinction between the two gradients, they're very similar - so I'm not sure what I'm looking for) Does it help if you set the initial properties with GSAP? See the Pen xxdRLvB by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Aitor Posted July 12, 2021 Author Share Posted July 12, 2021 Sure it helps! thank you. It solves the main question. For the other problem (it works in chrome but not in Firefox), maybe in another thread? I mean, the loop restart from scratch in firefox (macOS) each iteration repeating the same sequence with same colors, instead chaining smoothly the iterations with different colors. I'm sorry if I haven't been clear. I can make a screencast if needed. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2021 Share Posted July 12, 2021 I'm afraid I don't know why firefox is handling it differently. Gradients and filters and stuff are tricky things... I was going to say maybe it needs a vendor prefix. But it is rendering *and* animating - just not in the same way as chrome. https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()Unfortunately that's down to the browser - not GSAP. We try to keep the forum questions GSAP-specific, so don't make another thread - let's keep this here. If anyone knows of a fix, feel free to jump in. Link to comment Share on other sites More sharing options...
Aitor Posted July 12, 2021 Author Share Posted July 12, 2021 7 minutes ago, Cassie said: Unfortunately that's down to the browser - not GSAP. We try to keep the forum questions GSAP-specific, so don't make another thread - let's keep this here. If anyone knows of a fix, feel free to jump in. Ok. Thank you very much for your attention. In order to clarify the issue, I did a simplified codepen and a screencast from two brosers and describe more accurately the problem: Firefox render from negative to positive. These are screen recordings from Chrome and Firefox (macOS 11.4). As you can see, the recording from Chrome works perfectly, showing the smooth concatenation of iterations. On the contrary, Firefox begins each iteration, surprisingly, in negative, taking a walk in each iteration from negative to positive. See the Pen GRmNMzM by aitormendez (@aitormendez) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 12, 2021 Share Posted July 12, 2021 Hi Aitor! You should use backgroundImage. background isn't an actual computed property, as it's shorthand that combines everything. 5 Link to comment Share on other sites More sharing options...
Aitor Posted July 13, 2021 Author Share Posted July 13, 2021 15 hours ago, OSUblake said: You should use backgroundImage. background isn't an actual computed property, as it's shorthand that combines everything. Very well seen. That was the problem. Thank you. 1 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