animate.diff

--- a/material-button-types.framerfx/code/MaterialButton.tsx
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { Frame, useCycle, addPropertyControls, ControlType } from 'framer'
+import {
+  Frame,
+  useCycle,
+  addPropertyControls,
+  ControlType,
+  useAnimation,
+} from 'framer'
 import './fonts.css'

 // Open Preview (CMD + P)
@@ -9,6 +15,28 @@ window.log = console.log

 export function MaterialButton(props) {
   const [hover, setHover] = useState(false)
+  const circleAnim = useAnimation()
+
+  const onTap = async e => {
+    await circleAnim.start({
+      scale: 2,
+      left: e.offsetX,
+      top: e.offsetY,
+      transition: {
+        duration: 0,
+        scale: {
+          duration: 0.2,
+        },
+      },
+    })
+
+    circleAnim.start({
+      scale: 0,
+      opacity: 0,
+      transition: {
+        duration: 0,
+      },
+    })
+  }

   const Circle = () => {
     return (
@@ -19,6 +47,10 @@ export function MaterialButton(props) {
         borderRadius="100px"
         background={props.type == 'contained' ? '#9163F0' : '#E4D9F9'}
         center
+        initial={{
+          scale: 0,
+        }}
+        animate={circleAnim}
       />
     )
   }
@@ -41,6 +73,7 @@ export function MaterialButton(props) {
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onTap={onTap}
       >
         <Circle />
         <Frame width="100%" height="100%" background="">
@@ -67,6 +100,7 @@ export function MaterialButton(props) {
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onTap={onTap}
       >
         <Circle />
         <Frame width="100%" height="100%" background="">
@@ -96,6 +130,7 @@ export function MaterialButton(props) {
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onTap={onTap}
       >
         <Circle />
         <Frame width="100%" height="100%" background="">