Speaker anim

package-lock.json

@@ -21,6 +21,7 @@
 				"postcss": "^8.4.21",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
+				"remove-markdown": "^0.5.0",
 				"svelte": "^3.54.0",
 				"svelte-markdown": "^0.2.3",
 				"tailwindcss": "^3.2.6",
@@ -2307,6 +2308,12 @@
 				"url": "https://github.com/sponsors/mysticatea"
 			}
 		},
+		"node_modules/remove-markdown": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
+			"integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==",
+			"dev": true
+		},
 		"node_modules/resolve": {
 			"version": "1.22.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",

package.json

@@ -24,6 +24,7 @@
 		"postcss": "^8.4.21",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
+		"remove-markdown": "^0.5.0",
 		"svelte": "^3.54.0",
 		"svelte-markdown": "^0.2.3",
 		"tailwindcss": "^3.2.6",

src/lib/components/PeopleList.svelte

@@ -12,18 +12,24 @@
 	function twitterLink(handle) {
 		return `https://twitter.com/${handle}`;
 	}
+
+	function animateSpeaker (el) {
+		for(const e of el.target.getElementsByClassName('animate-speaker')) {
+			animateText({ target: e })
+		}
+	}
 </script>
 
 {#each items.map(getPerson) as item}
-	<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item">
+	<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item" on:mouseenter={animateSpeaker}>
 		<div>
 			<a href={twitterLink(item.twitter)} target="_blank"
 				><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
 			>
 		</div>
-		<div class="mt-4">{item.name}</div>
+		<div class="mt-4 speaker-name animate-speaker">{item.name}</div>
 		<div class="text-base text-mild">
-			<a href={twitterLink(item.twitter)} class="hover:underline">@{item.twitter}</a>
+			<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
 		</div>
 		{#if item.caption}
 			<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>

src/lib/helpers.js

@@ -1,3 +1,6 @@
+
+import removeMd from 'remove-markdown'
+
 export function rand(length) {
     let result = '';
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -18,7 +21,7 @@ export function animateText (ev) {
         return;
     }
     ev.target.setAttribute('data-animate', "1")
-    const orig = ev.target.getAttribute('data-text')
+    const orig = removeMd(ev.target.getAttribute('data-text'))
     const steps = orig.length
 
     const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')