Change structure, add demos to documentation sections

Author: Adam Plesnik

docs/src/docs/Docs.tsx

@@ -5,16 +5,21 @@ import Heading from '../components/Heading'
 import Paragraph from '../components/Paragraph'
 import MultiRangeDemo from '../demos/MultiRangeDemo'
 import SupportsDemo from '../demos/SupportsDemo'
-import TimelineOverrideDemo from '../demos/TimelineOverrideDemo'
 import {
-  keyframes101,
-  keyframes102,
-  keyframes103,
+  appearDemo,
+  appearKeyframes,
   multiRange,
   multiRangeKeyframes,
+  progressBarDemo,
+  progressBarKeyframes,
+  rangeDemo,
+  rangeKeyframes,
   supports,
 } from '../utils/demoExamples'
 import DocsTable from './DocsTable'
+import ProgressBarDemo from '../demos/ProgressBarDemo'
+import AppearDemo from '../demos/AppearDemo'
+import RangeDemo from '../demos/RangeDemo'
 
 const animationTimelineClasses = [
   { className: 'timeline', code: 'animation-timeline: scroll(y)' },
@@ -57,7 +62,7 @@ const supportsClasses = [
 const Docs = () => {
   return (
     <div>
-      <Heading size={2} id="documentation">
+      <Heading size={1} id="documentation">
         Documentation
       </Heading>
       <Paragraph>
@@ -81,78 +86,94 @@ const Docs = () => {
           <Code>timeline-scope</Code>
         </li>
       </ul>
-      <Heading size={3} id="documentation-101">
-        How to Make Your CSS Animation Scroll-driven
+
+      <Heading size={2} id="documentation-animation-timeline">
+        Animation Timeline
       </Heading>
       <Paragraph>
-        CSS animations consist of two components, a set of keyframes and a style describing the
-        animation. Let's declare a simple <Code>@opacity</Code> keyframe set and apply it to an
-        element we want to control by a scroll timeline.
+        The single most impressive feature of scroll-driven animations is an anonymous animation
+        timeline. It allows to easily trigger anything just by scrolling the page. Use the{' '}
+        <Code>timeline</Code> utility which defaults to <Code>animation-timeline: scroll(y)</Code>{' '}
+        and also provides an option to set custom timeline name with a modifier.
       </Paragraph>
-      <CodeBlock language="css">{keyframes101}</CodeBlock>
-      <CodeBlock language="html">{keyframes102}</CodeBlock>
+      <DocsTable items={animationTimelineClasses} />
+      <Heading size={3}>Anonymous Scroll Timeline Demo</Heading>
       <Paragraph>
-        To effectively control the animation, make sure to declare the timeline in the code after
-        the animation. By default, the shorthand <Code>animation</Code> property sets the{' '}
-        <Code>animation-timeline: auto</Code> unless set otherwise. However, using this plugin and
-        Tailwind CSS animations ensures that the declaration order is correct.
+        This demo showcases how to create a simple progress bar just by adding one utility class to
+        the element. We define the anonymous scroll timeline by adding <Code>timeline</Code> to the
+        progress bar.
       </Paragraph>
-      <CodeBlock language="css">{keyframes103}</CodeBlock>
-      <Paragraph>Scroll the container.</Paragraph>
-      <TimelineOverrideDemo />
-      <Heading size={3} href="#timeline" hrefType="demo" id="documentation-animation-timeline">
-        Animation Timeline
-      </Heading>
+      <ProgressBarDemo />
+      <CodeBlock language="html">{progressBarDemo}</CodeBlock>
+      <CodeBlock language="css">{progressBarKeyframes}</CodeBlock>
+      <Heading size={3}>Anonymous View Timeline Demo</Heading>
       <Paragraph>
-        Utility class specifying the timeline that is used to control the progress of a CSS
-        animation.
+        This demo showcases how to make the element appear after entering the view frame. We define
+        the anonymous view timeline by adding <Code>timeline-view</Code> to this element.
       </Paragraph>
-      <DocsTable items={animationTimelineClasses} />
-      <Heading size={3} href="#range" hrefType="demo" id="documentation-scroll-timeline">
+      <AppearDemo />
+      <CodeBlock language="html">{appearDemo}</CodeBlock>
+      <CodeBlock language="css">{appearKeyframes}</CodeBlock>
+
+      <Heading size={2}>Named Timelines</Heading>
+      <Heading size={3} id="documentation-scroll-timeline">
         Scroll Timeline
       </Heading>
       <Paragraph>
         Utility class setting the named scroll progress timeline, which is set on a scrollable
         element.
       </Paragraph>
       <DocsTable items={scrollTimelineClasses} />
-      <Heading size={3} href="#range" hrefType="demo" id="documentation-view-timeline">
+      <Heading size={3} id="documentation-view-timeline">
         View Timeline
       </Heading>
       <Paragraph>
         Utility class setting the named view progress timeline, which is set on a subject inside
         another scrollable element.
       </Paragraph>
       <DocsTable items={viewTimelineClasses} />
-      <Heading size={3} id="documentation-range">
+      <Heading size={2} id="documentation-range">
         Animation Range
       </Heading>
       <Paragraph>
         Animation range start controls where along the timeline an animation will start. It is set
         on the animated element.
       </Paragraph>
       <DocsTable items={rangeClasses} />
-      <Paragraph className="pt-6">
+      <Heading size={3}>Animation Range Demo</Heading>
+      <Paragraph>
         Scroll the container to see each how range utility class affects the animation.
       </Paragraph>
       <MultiRangeDemo />
       <CodeBlock language="html">{multiRange}</CodeBlock>
       <CodeBlock language="css">{multiRangeKeyframes}</CodeBlock>
-      <Heading size={3} href="#range" hrefType="demo" id="documentation-scope">
+      <Heading size={2} id="documentation-scope">
         Timeline Scope
       </Heading>
       <Paragraph>
         Timeline scope allows to control animations outside the element which defines the timeline.
       </Paragraph>
       <DocsTable items={scopeClasses} />
-      <Heading size={3} id="documentation-fallback">
+      <Heading size={3}>Range, Scope and Animation Timeline Name Demo</Heading>
+      <Paragraph>
+        This demo showcases the usage of the plugin to reveal the navigation bar. The{' '}
+        <Code>view-timeline/navbar</Code> utility sets up the animation timeline, which is then
+        scoped out of the defining element by <Code>scope/navbar</Code>. The navigation bar is
+        controlled by this timeline with the <Code>timeline/navbar</Code> utility. Utility class{' '}
+        <Code>range-on-exit</Code> is set to limit the timeline duration.
+      </Paragraph>
+      <RangeDemo />
+      <CodeBlock language="html">{rangeDemo}</CodeBlock>
+      <CodeBlock language="css">{rangeKeyframes}</CodeBlock>
+      <Heading size={2} id="documentation-fallback">
         Fallback Styling
       </Heading>
       <Paragraph>
         Use the <Code>no-animations</Code> modifier to apply fallback styling in browsers which do
         not support scroll-driven animations yet.
       </Paragraph>
       <DocsTable items={supportsClasses} />
+      <Heading size={3}>Fallback Demo</Heading>
       <SupportsDemo />
       <CodeBlock language="html">{supports}</CodeBlock>
     </div>

docs/src/docs/DocsTable.tsx

@@ -3,7 +3,7 @@ import DocsTableRow from './DocsTableRow'
 
 const DocsTable = ({ items }: DocsTableProps) => {
   return (
-    <div className="flex flex-col gap-2 py-2">
+    <div className="mb-6 flex flex-col gap-2  py-2">
       <div className="flex gap-1 text-xs font-bold sm:gap-4">
         <div className="pl-2 sm:w-80">Class</div>
         <div className="block opacity-50 sm:hidden">/</div>

docs/src/main.tsx

@@ -4,12 +4,17 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import './index.css'
 import DocsView from './views/DocsView'
 import TechView from './views/TechView'
+import HowToView from './views/HowToView'
 
 const router = createBrowserRouter([
   {
     path: '/',
+    element: <HowToView />,
+    errorElement: <HowToView />,
+  },
+  {
+    path: '/docs',
     element: <DocsView />,
-    errorElement: <DocsView />,
   },
   {
     path: '/tech',

docs/src/partials/Animations.tsx

@@ -1,4 +1,4 @@
-import { Github, Minus } from 'lucide-react'
+import { Github } from 'lucide-react'
 import Code from '../components/Code.tsx'
 import CodeBlock from '../components/CodeBlock.tsx'
 import Heading from '../components/Heading.tsx'
@@ -14,19 +14,12 @@ import {
 const Animations = () => {
   return (
     <>
-      <Heading size={2} id={'plugin'}>
-        Plugin
+      <Heading size={1} id={'plugin'}>
+        Tech
       </Heading>
       <Heading size={3} id={'code'} href="/docs#documentation-animation-timeline">
         Animation Timeline
       </Heading>
-      <Paragraph>
-        The single most impressive feature of scroll-driven animations is an anonymous animation
-        timeline. It allows user to easily trigger anything just by scrolling the page. Utility
-        below allows user to use the <Code>timeline</Code> CSS class which defaults to{' '}
-        <Code>animation-timeline: scroll(y)</Code> and also provides an option to set custom
-        timeline name with a modifier.
-      </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={
@@ -39,11 +32,6 @@ const Animations = () => {
       <Heading size={3} href="/docs#documentation-scroll-timeline">
         Scroll and View Timeline
       </Heading>
-      <Paragraph>
-        Scroll and View timelines provide user with better control over the animations. Both{' '}
-        <Code>scroll-timeline</Code> and <Code>view-timeline</Code> are meant to be used with
-        modifiers to set the timeline name.
-      </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={
@@ -56,10 +44,6 @@ const Animations = () => {
       <Heading size={3} href="/docs#documentation-range">
         Range
       </Heading>
-      <Paragraph>
-        Animation range controls start and end of an animation. Utility class <Code>range</Code>{' '}
-        offers multiple options with default value set to <Code>cover</Code>.
-      </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={
@@ -72,11 +56,6 @@ const Animations = () => {
       <Heading size={3} href="/docs#documentation-scope">
         Scope
       </Heading>
-      <Paragraph>
-        Timeline scope allows to control animations outside the element which defines the timeline.
-        Utility <Code>scope</Code> should be used with a modifier to define the timeline name set by{' '}
-        <Code>scroll-timeline</Code> or <Code>view-timeline</Code>.
-      </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={
@@ -86,13 +65,9 @@ const Animations = () => {
       >
         {codeExampleScope}
       </CodeBlock>
-      <Heading size={3} href="/docs#documentation-fallback" hrefType="documentation">
+      <Heading size={3} href="/docs#documentation-fallback">
         Fallback Styling
       </Heading>
-      <Paragraph>
-        Scroll-driven animations are not broadly supported yet. I decided to apply an
-        animation-first approach. Use the <Code>no-animations</Code> modifier for fallback styling.
-      </Paragraph>
       <CodeBlock
         Icon={Github}
         linkHref={

docs/src/partials/Demo.tsx

@@ -6,7 +6,8 @@ const Nav = () => {
   return (
     <div className="sticky top-0 z-20 flex w-full items-stretch justify-center border-b border-b-slate-200/50 bg-white/20 text-zinc-800 shadow-lg backdrop-blur-sm dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-300">
       <div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-2 md:px-16 lg:px-20">
-        <HeaderNavAnchor to="/">Docs</HeaderNavAnchor>
+        <HeaderNavAnchor to="/">How To</HeaderNavAnchor>
+        <HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
         <HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
         <div className="flex-1" />
         <DarkModeSwitch />

docs/src/partials/Nav.tsx

@@ -1,15 +1,10 @@
 import { WandSparkles } from 'lucide-react'
 import Docs from '../docs/Docs'
 import Page from '../layouts/Page'
-import Demo from '../partials/Demo'
-import Installation from '../partials/Installation'
-import MainTitle from '../partials/MainTitle'
 
 const DocsView = () => {
   return (
     <Page>
-      <MainTitle />
-      <Installation />
       <div className="hidden gap-4 rounded-lg border border-amber-400 bg-amber-50 p-4 text-sm no-animations:flex dark:border-amber-600 dark:bg-stone-700/30">
         <WandSparkles
           className="size-6 shrink-0 text-amber-500 dark:text-amber-600"
@@ -19,7 +14,6 @@ const DocsView = () => {
         see the demos working correctly.
       </div>
       <Docs />
-      <Demo />
     </Page>
   )
 }

docs/src/views/DocsView.tsx

@@ -0,0 +1,43 @@
+import Code from '../components/Code'
+import CodeBlock from '../components/CodeBlock'
+import Heading from '../components/Heading'
+import Paragraph from '../components/Paragraph'
+import TimelineOverrideDemo from '../demos/TimelineOverrideDemo'
+import Page from '../layouts/Page'
+import Installation from '../partials/Installation'
+import MainTitle from '../partials/MainTitle'
+import { keyframes101, keyframes102, keyframes103 } from '../utils/demoExamples'
+
+const HowToView = () => {
+  return (
+    <Page>
+      <MainTitle />
+      <Paragraph>
+        Unofficial and experimental plugin for Tailwind CSS v3.4+ that provides utilities for
+        scroll-driven animations.
+      </Paragraph>
+      <Installation />
+      <Heading size={2} id="documentation-101">
+        How to Make Your CSS Animation Scroll-driven
+      </Heading>
+      <Paragraph>
+        CSS animations consist of two components, a set of keyframes and a style describing the
+        animation. Let's declare a simple <Code>@opacity</Code> keyframe set and apply it to an
+        element we want to control by a scroll timeline.
+      </Paragraph>
+      <CodeBlock language="css">{keyframes101}</CodeBlock>
+      <CodeBlock language="html">{keyframes102}</CodeBlock>
+      <Paragraph>
+        To effectively control the animation, make sure to declare the timeline in the code after
+        the animation. By default, the shorthand <Code>animation</Code> property sets the{' '}
+        <Code>animation-timeline: auto</Code> unless set otherwise. However, using this plugin and
+        Tailwind CSS animations ensures that the declaration order is correct.
+      </Paragraph>
+      <CodeBlock language="css">{keyframes103}</CodeBlock>
+      <Paragraph>Scroll the container.</Paragraph>
+      <TimelineOverrideDemo />
+    </Page>
+  )
+}
+
+export default HowToView