feat: add Sal.js scroll animations

src/pages/sketchnotes.astro

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { getCollection } from 'astro:content';
 
 import { sortBySortKey } from '../utils';
+import { animation } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
@@ -25,6 +26,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 
 	<article
 		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
@@ -50,6 +52,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 							'md:col-span-5 md:row-span-6':
 								data.images[0].aspectRatio < 1 && data.coverSize === 'large',
 						})}
+						{...animation}
 					>
 						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
 							<Picture