Nativescript: mimic material design effect with floating action button
<p>I'm using Nativescript 1.6 and this component <a href="https://github.com/bradmartin/nativescript-floatingactionbutton" rel="nofollow">https://github.com/bradmartin/nativescript-floatingactionbutton</a></p>

<p>I would like to have some nice "material design effect" when you click on this button and then navigate to another page. It's a bit hacky but it does the job and looks quite nice (i probably should use fragment transitions with shared elements when i was in native Android world, but im not)</p>

<p>My current attempt:</p>

<p>XML:</p>

<pre><code>&lt;FAB:fab tap="tap"
  loaded="buttonLoaded"
  row="1"
  icon="res://ic_add_white_24dp"
  rippleColor="#f1f1f1"
  class="fab-button" /&gt;
</code></pre>

<p>JS:</p>

<pre><code>fabButton.icon = ""; // Error! ResourceNotFoundException
fabButton.animate({
  scale: { x: 20, y: 20 },
  translate: { x: -200, y: -200 },
  duration: 300
}).then(function(){
  navigation.goToDetailPage();

  fabButton.animate({ // reset button to original state
    scale: { x: 1, y: 1 },
    translate: { x: 0, y: 0 },
    delay: 100,
    duration: 0
  });
});
</code></pre>

<p>2 questions:</p>

<ul>
<li>How can i remove the icon, just for a nicer effect? "", {}, null are not allowed, should i really create a transparent png for this?</li>
<li>Is there a better way to restore/reset element after an animation?</li>
</ul>