Jump to content
GreenSock

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

gsap.to() dont take initial condition

Go to solution Solved by Cassie,

Recommended Posts

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 post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
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

  • Like 1
Link to post
Share on other sites

Hi Aitor!

 

You should use backgroundImage. background isn't an actual computed property, as it's shorthand that combines everything.

 

image.png

 

 

  • Like 5
Link to post
Share on other sites
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.

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

×