Add a link with a translate transirion

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>

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>

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;
+            }
+        }
+    }
+}