link

client/src/components/anims/link.jsx

@@ -0,0 +1,77 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Link extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation blue'
+                version="1.1"
+                id="link"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 128 128">
+                <defs>
+                    <filter id="linkFilter">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                        <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                </defs>
+                <g class='blue' filter='url(#linkFilter)' stroke-width="4px" stroke-linecap="round" >
+                    <path d= "
+                        M 4 4
+                        h 30
+                        q 30 0 30 30
+                        q 0 30 30 30
+                        h 30
+                        q 0 -30 -30 -30
+                        h -60
+                        q -30 0 -30 -30
+                    "/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#link'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: 1000 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        anime({
+            targets: ['#link path'],
+            strokeDashoffset: [anime.setDashoffset, 0],
+            duration: TIMES.TARGET_DURATION_MS * 0.8,
+            delay: TIMES.TARGET_DELAY_MS,
+            easing: 'easeInOutSine',
+        });
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Link;