ReactVR Component – Animated translation – transformOrigin?

UI.js

class UI extends React.Component {

  constructor(props) {
    super(props);

    this.buttons = this.props.buttonConfig;
    this.state = {
      animatedOpacity: new Animated.Value(1),
      animatedScale: new Animated.Value(1),
    };
  }

  componentWillMount() {
    this.fadeOut();
  }

  fadeOut() {
    Animated.parallel([
      Animated.timing(
        this.state.animatedOpacity,
        {
          toValue: 0.25,
          duration: 250,
          delay: 5000,
        }
      ),
      Animated.timing(
        this.state.animatedScale,
        {
          toValue: 0.000001,
          duration: 250,
          delay: 5000,
          easing: Easing.quad,
        }
      ),
    ]).start();
  }

  render () {

    const buttons = this.buttons.map((button) =>
      <Button/>
      );

    return (
      <Animated.View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          opacity: this.state.animatedOpacity,
          transform: [
            {scaleX: this.state.animatedScale},
            {scaleY: this.state.animatedScale},
            {translate: [-1.5, 0, -3]},
          ],
          width: 3,
        }}
      >
        {buttons}
      </Animated.View>
    );
  }
};

Where do you want to scale around

all views should transform around 50% 50% by default but they layout at top, left

you will also need to reverse the transform after

transform: [
            {translate: [1.5, 0, 3]},
            {scaleX: this.state.animatedScale},
            {scaleY: this.state.animatedScale},
            {translate: [-1.5, 0, -3]},
          ],