How to use the react-motion.presets.stiff function in react-motion

} = this.props;

    const open = this.state.open && this.props.open;

    // If drawer isn't open or in the process of opening/closing, then remove it from the DOM
    // also, if we're not client side we need to return early because createPortal is only
    // a clientside method
    if ((!this.state.open && !this.props.open) || !isClientSide()) {
      return null;
    }

    const { touching } = this.state;

    const animationSpring = touching
      ? { damping: 20, stiffness: 300 }
      : presets.stiff;

    const hiddenPosition = this.getElementSize();

    const position = this.getPosition(hiddenPosition);

    // Style object for the container element
    let containerStyle = {
      backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
    };

    // If direction is right, we set the overflowX property to 'hidden' to hide the x scrollbar during
    // the sliding animation
    if (isDirectionRight(direction)) {
      containerStyle = {
        ...containerStyle,
        overflowX: "hidden"

render() {
    const { show } = this.props;

    return ReactDOM.createPortal(
      <div>
        {show ? (
          
            {things =&gt; (
              <div tabindex="{0}" role="button"> { this.node = node; }} style={{ opacity: things.x }} className="modal-backdrop" /&gt;
            )}
          
        ) : null}

        
          { stuff =&gt; (
            </div></div>

render() {
    const { showBackButton } = this.state;
    return (
      
        {({ x }) => (
          
        )}
      
    );
  }
  // #endregion

return this.props.list.map(rec => {
      const recHeight = rec.isSpoc ? 140 : 110
      return {
        ...rec,
        data: rec,
        key: 'id' + rec.id,
        style: {
          height: spring(recHeight, { stiffness: 150, damping: 14 }),
          opacity: spring(1, presets.stiff)
        }
      }
    })
  }

render() {
    let logger = loggerCreator("render", moduleLogger);
    logger.info(`start`);

    let [sidebarLeftStart, sidebarLeftEnd] = this.getSidebarLeft();

    return (
      <div>
        <img src="{sidebarImage}">
        
          { value =&gt;  }
        
      </div>
    )
  }
}

export const Pulse = () =>
  
    {style =&gt; <div style="{style}">}
  ;
</div>

.map(notification => {
        let item = prevItems.find(style => style.key === (notification.notificationId.toString()));
        let style = !item ? {opacity: 0, height: 0} : false;

        if (!style && (notification.type === this.props.filter || this.props.filter === 'all')) {
          style = {
            opacity: spring(1, presets.stiff),
            height: spring(61, presets.stiff)
          };
        } else if (notification.type !== this.props.filter) {
          style = {
            opacity: spring(0, presets.stiff),
            height: spring(0, presets.stiff)
          };
        }

        return {
          key: notification.notificationId.toString(),
          style,
          data: notification
        };
      });
  };

renderUserMenu(isUserMenuOpen, playlist, getPlaylistDetails) {
    const playlistNames = getPlaylistDetails.playlistNames;
    const tabs = ['stream', 'likes', ...playlistNames];

    return (
      
        {({ height }) =>
          <div height="" style="{{">
            {this.renderUserTabs(tabs)}
          </div>
        }
      
    );
  }

render() {
    const { showAlert, warningTitle, warningMessage, onClose } = this.props;

    return (
      
        {({ interpolatedScale }) => (
          <div style="{{">
            <button type="button">
              ×
            </button>
            {warningTitle &amp;&amp;
              warningTitle.length &gt; 0 &amp;&amp; <strong>{warningTitle}</strong>}
            {<p>{warningMessage}</p>}</div>

renderGenreMenu(isGenreMenuOpen, playlist) {
    return (
      
        {({ height }) =>
          <div height="" style="{{">
            {this.renderGenresTabs(playlist)}
          </div>
        }
      
    );
  }