runSpring1.js

[...]
 
function runSpring({
  clock, // The clock instance
  from, // Initial value before starting the animation
  velocity, // Initial velocity of the spring animation
  toValue, // Final value of the animation
  scrollEndDragVelocity,
}) {
  const state = {
    finished: new Value(0),
    velocity: new Value(0),
    position: new Value(0),
    time: new Value(0),
  };

  const config = {
    damping: 1,
    mass: 1,
    stiffness: 50,
    overshootClamping: true,
    restSpeedThreshold: 0.001,
    restDisplacementThreshold: 0.001,
    toValue: new Value(0),
  };

  return [
    cond(clockRunning(clock), 0, [
      set(state.finished, 0),
      set(state.velocity, velocity),
      set(state.position, from),
      set(config.toValue, toValue),
      startClock(clock),
    ]),
    spring(clock, state, config),
    cond(state.finished, [
      // Once the animation is done, we reset scrollEndDragVelocity to its default value
      set(scrollEndDragVelocity, DRAG_END_INITIAL),
      stopClock(clock),
    ]),
    state.position,
  ];
}
 
class CollapsibleNavBar extends React.Component {
  constructor(props) {
    super(props);
    this.scrollY = new Value(0);
    this.scrollEndDragVelocity = new Value(DRAG_END_INITIAL);

    const diffClampNode = diffClamp(this.scrollY, 0, NAV_BAR_HEIGHT);
    const inverseDiffClampNode = multiply(diffClampNode, -1);
    const snapPoint = cond(
      lessThan(diffClampNode, NAV_BAR_HEIGHT / 2),
      0,
      -NAV_BAR_HEIGHT,
    );

    const clock = new Clock();

    this.animatedNavBarTranslateY = cond(
      // Condition to detect if we stopped scrolling
      neq(this.scrollEndDragVelocity, DRAG_END_INITIAL),
      runSpring(
        clock,
        from: inverseDiffClampNode,
        velocity: 0,
        toValue: snapPoint,
        scrollEndDragVelocity: this.scrollEndDragVelocity,
      ),
      inverseDiffClampNode,
    );
 
    [...]
  }
  
  [...]
}