Transition between two points using a curve/arch/path

[AdamGerthel]

I'm trying to animate an element along a curve, like the numbers in the below example:

As you can see, the number (36 in this case) scales down (to point of origin, I think) and then travels along a curved path either to the left or to the right as it fades away.

I've tried to achieve this using keyframes but it doesn't seem to be possible to do. I've tried all kinds of easings but I think I've reached the conclusion that easings will never be able to solve it, because the element will still only travel in a straight line between the points/coordinates that I set up - i.e. it will never travel in a natural looking arch.

Here's an example of what I've managed to achieve so far:

But as you can see, it doesn't look as natural.

I've been searching everywhere for an answer to this but have so far not been able to find what I'm looking for. Is this possible to do with reanimated, and if so - how? Is there a keyword I'm missing when I'm searching for solutions to this? Does it have a name?

Please help! 🙏

This is my current animation:

// variables.distance is a numeric. The value ranges from 16-25 depending on device size

const getDuration = (duration: number, isCritical: boolean | null) =>
  isCritical ? duration * 1.25 : duration

enum XDirection {
  Right,
  Left
}

const DEFAULT_FROM_SCALE = 1.25
const CRITICAL_FROM_SCALE = 2
const INITIAL_DIRECTION_OFFSET = variables.distance / 12.5

  const xDirection: XDirection = Math.random() > 0.5 ? 1 : 0
  const xOffsetTop = Math.max((Math.random() * variables.distance) / 3, 1)
  const xOffsetBottom = xOffsetTop * 3

  const enteringAnimation = new Keyframe({
    0: {
      transform: [
        { translateX: 0 },
        { translateY: 0 },
        { scale: event.critical ? CRITICAL_FROM_SCALE : DEFAULT_FROM_SCALE }
      ],
      opacity: 1
    },
    10: {
      transform: [
        {
          translateX: 0
        },
        { translateY: -INITIAL_DIRECTION_OFFSET * 2 },
        { scale: 1 }
      ],
      opacity: 1,
      easing: Easing.linear
    },
    60: {
      transform: [
        { translateX: xDirection === XDirection.Right ? xOffsetTop : -xOffsetTop },
        { translateY: -variables.distance },
        { scale: 1 }
      ],
      opacity: 0.9,
      easing: Easing.out(Easing.quad)
    },
    75: {
      transform: [
        { translateX: xDirection === XDirection.Right ? xOffsetTop + 1 : -(xOffsetTop + 1) },
        { translateY: -variables.distance }
      ],
      opacity: 0.7
    },
    100: {
      transform: [
        { translateX: xDirection === XDirection.Right ? xOffsetBottom + 2 : -(xOffsetBottom + 2) },
        { translateY: -variables.distance / 2 },
        { scale: 0.7 }
      ],
      opacity: 0,
      easing: Easing.in(Easing.quad)
    }
  }).duration(getDuration(750, event.critical))

[daxaxelrod]

Couldnt find anything so came up with a cubic beziar worklet function. I first tried to coopt the reanimated bezier functions but that didnt work.

T = a shared value that animates from 0 -> 1
point0 = origin point (x,y)
point1 = reference point, so if your origin is (0,0) and destination is (100, 100) , you'll want like (20,80) as your reference point
point2 = destination

function quadraticBezier(t, point0, point1, point2) {
    'worklet';

    const oneMinusT = 1 - t;
    const oneMinusTSquared = oneMinusT * oneMinusT;
    const tSquared = t * t;

    const x =
      oneMinusTSquared * point0.x +
      2 * oneMinusT * t * point1.x +
      tSquared * point2.x;
    const y =
      oneMinusTSquared * point0.y +
      2 * oneMinusT * t * point1.y +
      tSquared * point2.y;

    return { x, y };
  }

Hope this helps!

[AdamGerthel]

Thanks! I'll give it a try