Numeric Range Solution

[00:00:00]
>> Let's take a look at this. So let's set our P property here for now, and let's set it to say one. And actually, let's use an intermediate variable for this to make things clearer. So we want this to be 100% when P is one. And. It's very easy to mess up parenthesis here, and we want it to be 20%.

[00:00:51]
When P is zero, yeah, we wanted it to be zero. And note actually we can simplify this. Since the second term is zero, we can just remove it. And then we can just go here and replace this, with the variable. So the gradient center we could have probably figured it out without the formula, but it gets a little bit trickier here.

[00:01:26]
So, let's use a separate variable for clarity. Let's call it text-shadow x, so let's sum up what we have here. So when P is one we want it to be minus 1 minus 1m's and when P is 0, we want it to be 1m. So, we don't need to think, we can just apply the formula.

[00:02:09]
And let's see now does it work, moment of truth. Okay, 0 works, let's hold down control and usually up arrows to try multiple values, it works. And now we could even register this and animate it. And we do want it to inherit in this case, And let's specify some key frames that take P from 0 to 1, and now we're gonna go here and say animation, let's say five seconds.

[00:03:05]
Or a word we haven't given it a name, let's say spotlight. And go make it infinite, and we wanted to alternate when it reaches the end. So let's look at that. That's it, and obviously without range mapping, we could have still done it. We could have animated gradients center x and text shadow x individually.

[00:03:38]
We could have included them both in the key frames, we could have registered them both. But this kind of range mapping makes things a lot easier because we control the entire range with just one custom property, and this is really important when we just one week want to expose.

[00:03:56]
One custom property. For example, when we have a component that's being styled and we want to expose a certain aspect of its design through a custom property. But internally we need to use this value to set multiple different properties internally, so we do need to know how to do this range mapping.