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;