Create onHover animation with transition on featurelayer symbol with v4.20

[KenjooYeap]

Hi, 

I wish to create a simple transition animation that enlarge the feature layer symbol when hovered over using the jsapi v4.20, I tried using webstyle symbol, picture-marker symbol, and simple-marker symbol without success. 

Currently, I am using the js window.requestAnimationFrame to edit the size of the graphic added onHover, however it seems to only work for the first time and is not always successful (sometimes it just sudden becomes big without the transition). Besides, just changing the size of the symbol (tire-pin) looks like it's moving the pointer and I would need the symbol to be pointing to the same position during the transition, I guess that would need some offsetting done? 

Any suggestion of alternative ways that would work or any exisiting examples would be very much appreciated! 

The code I am using is as below: 

view.when(function () {
    view.whenLayerView(allSchoolLayerCluster).then(function (lview) {
      watchUtils.whenFalseOnce(lview, "updating", function () {  
        // Set up a click event handler and retrieve the screen x, y coordinates 
        view.on("pointer-move", function (evt) { 
          var screenPoint = { 
            x: evt.x, 
            y: evt.y  
          };
          // the hitTest() checks to see if any graphics in the view 
          // intersect the given screen x, y coordinates
          view.hitTest(screenPoint,{exclude: countyDivision})
          .then(function (response) { 
            changeCursor(response);
            getGraphics(response); 
          });
        });
      });
    });
  });

function getGraphics(response) {
    view.graphics.removeAll();
    if (response.results.length > 0) { //there's a match between feature and crusoe position
      var graphic = response.results[0].graphic;
      if (allSchoolLayerClusterVisible == true) {
          onHoverClusterGraphic.size = 25;
          graphic.symbol = onHoverClusterGraphic;
      } else if (allSchoolLayerVisible == true) {
        onHoverFeatureGraphic.size=0;
        graphic.symbol = onHoverFeatureGraphic;
      }
      
      view.graphics.add(graphic);
      window.requestAnimationFrame(()=>animateOnHover(view, graphic));
    }
  }
  
function animateOnHover(view, graphic) {
    if (allSchoolLayerClusterVisible == true) {
      if (view.graphics.items[0].symbol.size < 25) {
        onHoverClusterGraphic.size += 1 ;
        graphic.symbol = onHoverClusterGraphic;
        view.graphics.add(graphic);
        window.requestAnimationFrame(()=>animateOnHover(view,graphic));
      } 
    }
      
    if (allSchoolLayerVisible == true) {
      if (view.graphics.items[0].symbol.size < 5) {
        onHoverFeatureGraphic.size += 0.5;
        graphic.symbol = onHoverFeatureGraphic;
        view.graphics.add(graphic);
        window.requestAnimationFrame(()=>animateOnHover(view,graphic));
      }
    }
  }