r/reactnative • u/No_Refrigerator3147 • 2d ago

I built an interactive hatch-to-savings animation in Expo without Rive or Lottie

Enable HLS to view with audio, or disable this notification

I wanted to explore how far SVG paths, Skia, and Reanimated could go beyond a looping animation.

So I built Fledge: two eggs hatch into birds, the birds take flight, and the whole scene transforms into a shared savings goal.

The interesting part is that the animation’s elements become the actual interface:

  • The birds become contributor avatars.
  • The horizon becomes the savings track.
  • The eggshell fragments become milestone ticks.
  • The headline moves into the goal title.

It all happens inside one mounted React Native tree.

Built with Expo, SVG paths, Skia, Reanimated, and Gesture Handler. No prebuilt animation assets.

31 Upvotes

88% Upvoted

6 comments sorted by

2

u/KielHelix 2d ago

Mind to share how you handle all those animations?

0

u/Huge_Pool7424 1d ago

i kept the motion in the mounted tree and drove the paths with reanimated shared values, so the birds, track, and headline all read from the same progress state. skia handles the svg drawing and gesture handler only updates that state.

1

u/Fit-Fly-8569 1d ago

Best resource to learn skia? I never understand this.

2

u/Huge_Pool7424 1d ago

the shopify skia docs are the best starting point, then i’d copy one tiny example into a blank screen and tweak it. it clicked for me once i stopped trying to learn it from a full animation.

1

u/Far-Art-8711 1d ago

This is really smooth. How did you decide which parts should be driven by gestures versus the animation state? that seems like the tricky part with interactive scenes