rafMarkerMount.js

 componentDidMount = () => {
        let animation = this.requestAnimationFrame(this.animationLooper.bind(this));
    }
 
 animationLooper = () => {
        let now = Date.now();
        let deltaTime = now - this.state.then;
       
        // user distance = time * rate to determine the amount the marker should grow or shrink
        let growth = deltaTime / 1000 * this.state.markerGrowthSpeed;

        // variable to hold the new size of the marker
        let newSize;
  
        // check if the marker is in 'shrink' mode
        if (this.state.growthSwitch === 'shrink') {
            // marker can only shrink to a minimum size
            newSize = Math.max(this.state.size - growth, MIN_MARKER_SIZE);

        }
        // check if the marker is in 'grow' mode
        else if (this.state.growthSwitch === 'grow') {
            // marker can only grow to a maximum size
            newSize = Math.min(this.state.size + growth, MAX_MARKER_SIZE);
        }
        else{   // error catching
            console.log("error");
        }
        
        // determine if the marker should start shrinking if it has reached maximum size
        // or start start growing if it has reached minimum size
        let newGrowthSwitch = newSize >= MAX_MARKER_SIZE ? "shrink" :
            newSize <= MIN_MARKER_SIZE ? "grow" : this.state.growthSwitch;

        // set the state variables for this marker.  the size variable is used in the size property
        // FontAwesome map-marker icon
        this.setState({
            size: newSize,
            then: now,
            growthSwitch: newGrowthSwitch
        });

        this.requestAnimationFrame(this.animationLooper.bind(this));
    }