From e212829db5989b332b325cba0f96f599e2c45316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 27 Feb 2020 23:05:42 +0100
Subject: [PATCH] Add a link with a translate transirion

---
 src/atoms/LinkTranslate.svelte | 15 ++++++++++++
 src/molecules/Footer.svelte    | 10 +++++---
 src/style/atoms/_link.scss     | 45 ++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/atoms/LinkTranslate.svelte

diff --git a/src/atoms/LinkTranslate.svelte b/src/atoms/LinkTranslate.svelte
new file mode 100644
index 0000000..64dafcc
--- /dev/null
+++ b/src/atoms/LinkTranslate.svelte
@@ -0,0 +1,15 @@
+<script>
+    import * as fn from '../functions'
+
+    export let href = ''
+    export let text = ''
+    export let target = ''
+    export let rel = ''
+</script>
+
+<a {href} class="link-translate" {target} {rel}>
+    <slot />
+    <div class="text" data-text={text}>
+        <span>{text}</span>
+    </div>
+</a>
diff --git a/src/molecules/Footer.svelte b/src/molecules/Footer.svelte
index 768ff40..103207b 100644
--- a/src/molecules/Footer.svelte
+++ b/src/molecules/Footer.svelte
@@ -3,6 +3,7 @@
 	import { site, currentLocation } from '../store'
 
 	// Components
+	import LinkTranslate from '../atoms/LinkTranslate'
 	import Switcher from '../molecules/Switcher'
 </script>
 
@@ -15,12 +16,13 @@
 		<ul class="footer__right">
 			<li>
 				<ul>
-					<li><a href="/credits">Credits</a></li>
+					<li>
+						<LinkTranslate href="/credits" text="Credits" />
+					</li>
 					<li class="instagram">
-						<a href="https://instagram.com/{$site.instagram}" target="_blank">
+						<LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank">
 							<img src="/img/icons/instagram.svg" alt="Instagram">
-							<span>Instagram</span>
-						</a>
+						</LinkTranslate>
 					</li>
 				</ul>
 			</li>
diff --git a/src/style/atoms/_link.scss b/src/style/atoms/_link.scss
index 890d13f..94efb32 100644
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -63,3 +63,48 @@
         }
     }
 }
+
+
+// Link with animated letters
+.link-translate {
+    .text {
+        position: relative;
+        overflow: hidden;
+
+        &:after {
+            content: attr(data-text);
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            transform: translateY(-50%);
+            opacity: 1;
+            transition: all 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
+
+        span {
+            display: inline-block;
+            transform: translateY(-75%);
+            opacity: 0;
+            transition: all 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
+    }
+
+    // Hover
+    &:hover {
+        .text {
+            &:after {
+                transform: translateY(25%);
+                opacity: 0;
+            }
+
+            span {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    }
+}