Is it possible to use greater than inside interpolate function?

[itsnyx]

Hello, here is my question.
lets say i have
const scrollY= useSharedValue(0);
and this scrollY boundaries starts from 0 till something that can maybe 100 or maybe 1000 or maybe 50

i want to write a interpolate that works with greater than logic like this :

const animatedHeight = interpolate(scrollY.value, [0, greaterThan(0)], [45, 0]);

How to achieve this ?

i already know about my below solution is there something better ?

    useAnimatedReaction(
      () => scrollY.value,
      (next, prev) => {
        if (next !== prev && prev !== null) {
          if (scrollY.value < 5) {
            containerProg.value = withTiming(0, {duration: 300});
          } else if (scrollY.value > 5) {
            containerProg.value = withTiming(1, {duration: 300});
          }
        }
      },
      [scrollY.value],
    );

[MatiPl01]

Hey!

I'm afraid I don't get what you are trying to achieve with this greaterThan logic.

In general, input and output arrays passed to interpolate specify the range in which the first value is the lower bound and the last the upper bound, so e.g.

[a, b] is interpreted as x >= a && x <= b, where x is the the value passed as the first (value) argument of the interpolate function.

This range doesn't necessarily have to consist only 2 values (the lower and the upper bound). It can have multiple steps, but the number of steps in the input array must be the same as the number of steps in the output array, e.g.:

input: [a1, b1, c1, d1]
output: [a2, b2, c2, d2]

will map:

• a1 <= x <= b1 to y in range [a2, b2] (a2 <= y <= b2)
• b1 <= x <= c1 to y in range [b2, c2] (b2 <= y <= c2)
• c1 <= x <= d1 to y in range [c2, d2] (c2 <= y <= d2)

you also can specify the extrapolate parameter (maybe this is what you are looking for).

Let me know if it helps or please clarify the question and I will try to help you then.

[itsnyx]

@MatiPl01 thanks for the detailed answer. but let me explain more:

scrollY.value in my app ranges from 0 to +infinity (maybe 1000 - or maybe 1000000)

and i want my output range for this input to behave like this : from 0 to 5 output should be 45
and for greater than 5 to +infinity output should be 0 - because i don't know what is my max range for my scrollY.value
that's why i want some logic for this.

[MatiPl01]

Thanks for explanation. You can do a little trick in here based on the knowledge from my previous comment.

Explanation

If you want your interpolated value to be constant when it exceeds your input range (in your case it must be always a constant number but different for different input values), you have to use Extrapolation.CLAMP as the last parameter of the interpolate function call.

This is the default behavior of the clamp extrapolation:

What you are trying to achieve is just a different version of this example with a single-value input range. Something like this:

You have 2 possible solution to achieve the desired effect:

Solution

1. Use the input range where the second value is slightly greater than the first one, such as:

const SMALL_DELTA = 1e-6; // 10^-6 = 0.000001

const animatedHeight = interpolate(scrollY.value, [5, 5 + SMALL_DELTA], [45, 0], Extrapolation.CLAMP)

2. Use a little trick with 3 input and output values:

const animatedHeight = interpolate(scrollY.value, [5, 5, 5 /* anything */], [45, 0, 0], Extrapolation.CLAMP)

Specifying just 2 equal values in the input range [5, 5] won't work. In this case, you can provide 3 values (the last one in the input range can be anything).

[itsnyx]

thanks for the awesome answer 🎉