Animating `innerRadius` on a RingGeometry with CustomPropertyAnimation in Niantic Studio

🧑‍💻 Technical Support
1

Hi 8th Wall team,

I’m trying to tween my portal’s ring innerRadius using:

 ecs.CustomPropertyAnimation.set(world, portalHiderRing, {
  property: 'innerRadius',
  to: 3.5,
  autoFrom: true,
  duration: 1500,
  easeOut: true,
  easingFunction: 'Elastic',
});

But there’s no “RingGeometry” attribute to specify, so the animation never runs. Right now I have to fall back to:

ecs.RingGeometry.set(world, portalHiderRing, {
 innerRadius: 3.5,
 outerRadius: 20,
});

Is there a supported way to animate RingGeometry properties (innerRadius/outerRadius) directly with CustomPropertyAnimation? If so, what attribute name should I use or what’s the recommended approach?

Thanks!

2

Your best bet is to use a custom curve function and change the innerRadius in a mutate function on tick.

For example:

function easeOutCubic(x: number): number {
return 1 - Math.pow(1 - x, 3);
}

Check out https://easings.net/ if you want to see all the functions.

3

Ok cool thank you! I’ll see how I can implement that!