feat(doc): timeline example

Author: rootEnginear

src/components/Sections/ContainerScroll.svelte

@@ -14,7 +14,7 @@
 
 	<Code code={`<div use:scroll={(node) => [/* ... */, { container: node }]} />`}></Code>
 
-	<h3 class="mt-8">Example</h3>
+	<h3 class="mt-8 mb-8">Example</h3>
 
 	<div
 		use:containerScroll={(node) => [

src/components/Sections/Examples.svelte

@@ -10,7 +10,7 @@
 <section id="more-examples">
 	<h2>More Examples</h2>
 
-	<h3>Staggered Animation</h3>
+	<h3 id="staggered-animation">Staggered Animation</h3>
 
 	<blockquote>
 		<a href="https://motion.dev/docs/stagger" target="_blank" rel="nofollow noopener noreferrer"
@@ -56,7 +56,61 @@
 </div>`}
 	/>
 
-	<h3 class="mt-8">Enable/Disable Animation</h3>
+	<h3 id="timeline-sequences" class="mt-8">Timeline Sequences</h3>
+
+	<blockquote>
+		<a
+			href="https://motion.dev/docs/animate#timeline-sequences"
+			target="_blank"
+			rel="nofollow noopener noreferrer">https://motion.dev/docs/animate#timeline-sequences</a
+		>
+	</blockquote>
+
+	<div
+		style="display:flex;gap:8px"
+		use:inView={[
+			(el) => {
+				const children = [...el.children];
+
+				animate([
+					[children[0], { y: [100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+					[children[1], { rotate: [90, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+					[children[2], { x: [-100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+					[children[3], { scale: [0, 1], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }]
+				]);
+			}
+		]}
+	>
+		<div style="height:64px;flex:1 1 0%;min-width:0;background:#FF4136"></div>
+		<div style="height:64px;flex:1 1 0%;min-width:0;background:#FF851B"></div>
+		<div style="height:64px;flex:1 1 0%;min-width:0;background:#FFDC00"></div>
+		<div style="height:64px;flex:1 1 0%;min-width:0;background:#2ECC40"></div>
+	</div>
+
+	<Code
+		code={`<div
+	style="display:flex;gap:8px"
+	use:inView={[
+		(el) => {
+			const children = [...el.children];
+
+			animate([
+				[children[0], { y: [100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+				[children[1], { rotate: [90, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+				[children[2], { x: [-100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
+				[children[3], { scale: [0, 1], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }]
+			]);
+		}
+	]}
+>
+	<div style="height:64px;flex:1 1 0%;min-width:0;background:#FF4136"></div>
+	<div style="height:64px;flex:1 1 0%;min-width:0;background:#FF851B"></div>
+	<div style="height:64px;flex:1 1 0%;min-width:0;background:#FFDC00"></div>
+	<div style="height:64px;flex:1 1 0%;min-width:0;background:#2ECC40"></div>
+</div>`}
+	/>
+
+	<h3 id="enable-disable-animation" class="mt-8">Enable/Disable Animation</h3>
 
 	<label><input type="checkbox" bind:checked={enabled} /> Enable Animation</label>
 

src/components/Sections/ScrollInView.svelte

@@ -14,7 +14,7 @@
 
 	<Code code={`<div use:scroll={(node) => [/* ... */, { target: node }]} />`}></Code>
 
-	<h3 class="mt-8">Example</h3>
+	<h3 class="mt-8 mb-8">Example</h3>
 
 	<div
 		use:scrollInView={(node) => [

src/components/Sections/TableOfContents.svelte

@@ -9,7 +9,14 @@
 		<li><a href="#use-scroll-in-view">use:scrollInView</a></li>
 		<li><a href="#use-hover">use:hover</a></li>
 		<li><a href="#use-press">use:press</a></li>
-		<li><a href="#more-examples">More Examples</a></li>
+		<li>
+			<a href="#more-examples">More Examples</a>
+			<ol style="list-style:circle">
+				<li><a href="#staggered-animation">Staggered Animation</a></li>
+				<li><a href="#timeline-sequences">Timeline Sequences</a></li>
+				<li><a href="#enable-disable-animation">Enable/Disable Animation</a></li>
+			</ol>
+		</li>
 		<li><a href="#best-practices">Best Practices</a></li>
 	</ol>
 </section>

src/styles.css

@@ -22,6 +22,8 @@ html {
 
 	color: #020617;
 	background: #f8fafc;
+
+	scroll-padding-top: 70px;
 }
 
 body {
@@ -45,7 +47,7 @@ main {
 }
 
 section {
-	padding: 20px 20px;
+	padding: 20px;
 	border-radius: 8px;
 	border: #020617 4px solid;
 }