diff --git a/client/src/animations.test.js b/client/src/animations.test.js
index 92a19996..6ea4ccec 100644
--- a/client/src/animations.test.js
+++ b/client/src/animations.test.js
@@ -1,10 +1,12 @@
const preact = require('preact');
const TrippyTriangle = require('./components/svgs/trippy.triangle');
+const Amplify = require('./components/svgs/amplify');
const Animations = () => (
+
);
diff --git a/client/src/components/svgs/amplify.jsx b/client/src/components/svgs/amplify.jsx
new file mode 100644
index 00000000..5b308ead
--- /dev/null
+++ b/client/src/components/svgs/amplify.jsx
@@ -0,0 +1,51 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+class TrippyTriangle extends Component {
+ constructor() {
+ super();
+ this.state = { delta: 0 };
+ this.progress = this.progress.bind(this);
+ }
+
+ render() {
+ const { delta } = this.state;
+
+ const curvePoint = 200 * Math.sin(delta);
+
+ const path = `
+ M0,100
+ C 100,${100 - curvePoint}
+ 100,${100 + curvePoint}
+ 200,100
+ `;
+
+ return (
+
+ );
+ }
+
+ progress() {
+ const delta = this.state.delta + 0.1;
+ this.setState({ delta });
+ if (delta > 20) return false;
+ requestAnimationFrame(this.progress);
+ }
+
+ componentDidMount() {
+ requestAnimationFrame(this.progress);
+ }
+
+ componentWillUnmount() {
+ // clearAnimation(this.props.id);
+ }
+}
+
+module.exports = TrippyTriangle;
diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx
index 7e00d6c1..623b0345 100644
--- a/client/src/components/svgs/trippy.triangle.jsx
+++ b/client/src/components/svgs/trippy.triangle.jsx
@@ -31,6 +31,7 @@ class TrippyTriangle extends Component {
}
progress() {
+
requestAnimationFrame(this.progress);
this.now = window.performance.now();
const elapsed = this.now - this.then;