Skip to content

Commit c15f2d1

Browse files
author
Adam Plesnik
committed
Change structure, add demos to documentation sections
1 parent 53cb871 commit c15f2d1

File tree

9 files changed

+108
-130
lines changed

9 files changed

+108
-130
lines changed

docs/src/docs/Docs.tsx

Lines changed: 52 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@ import Heading from '../components/Heading'
55
import Paragraph from '../components/Paragraph'
66
import MultiRangeDemo from '../demos/MultiRangeDemo'
77
import SupportsDemo from '../demos/SupportsDemo'
8-
import TimelineOverrideDemo from '../demos/TimelineOverrideDemo'
98
import {
10-
keyframes101,
11-
keyframes102,
12-
keyframes103,
9+
appearDemo,
10+
appearKeyframes,
1311
multiRange,
1412
multiRangeKeyframes,
13+
progressBarDemo,
14+
progressBarKeyframes,
15+
rangeDemo,
16+
rangeKeyframes,
1517
supports,
1618
} from '../utils/demoExamples'
1719
import DocsTable from './DocsTable'
20+
import ProgressBarDemo from '../demos/ProgressBarDemo'
21+
import AppearDemo from '../demos/AppearDemo'
22+
import RangeDemo from '../demos/RangeDemo'
1823

1924
const animationTimelineClasses = [
2025
{ className: 'timeline', code: 'animation-timeline: scroll(y)' },
@@ -57,7 +62,7 @@ const supportsClasses = [
5762
const Docs = () => {
5863
return (
5964
<div>
60-
<Heading size={2} id="documentation">
65+
<Heading size={1} id="documentation">
6166
Documentation
6267
</Heading>
6368
<Paragraph>
@@ -81,78 +86,94 @@ const Docs = () => {
8186
<Code>timeline-scope</Code>
8287
</li>
8388
</ul>
84-
<Heading size={3} id="documentation-101">
85-
How to Make Your CSS Animation Scroll-driven
89+
90+
<Heading size={2} id="documentation-animation-timeline">
91+
Animation Timeline
8692
</Heading>
8793
<Paragraph>
88-
CSS animations consist of two components, a set of keyframes and a style describing the
89-
animation. Let's declare a simple <Code>@opacity</Code> keyframe set and apply it to an
90-
element we want to control by a scroll timeline.
94+
The single most impressive feature of scroll-driven animations is an anonymous animation
95+
timeline. It allows to easily trigger anything just by scrolling the page. Use the{' '}
96+
<Code>timeline</Code> utility which defaults to <Code>animation-timeline: scroll(y)</Code>{' '}
97+
and also provides an option to set custom timeline name with a modifier.
9198
</Paragraph>
92-
<CodeBlock language="css">{keyframes101}</CodeBlock>
93-
<CodeBlock language="html">{keyframes102}</CodeBlock>
99+
<DocsTable items={animationTimelineClasses} />
100+
<Heading size={3}>Anonymous Scroll Timeline Demo</Heading>
94101
<Paragraph>
95-
To effectively control the animation, make sure to declare the timeline in the code after
96-
the animation. By default, the shorthand <Code>animation</Code> property sets the{' '}
97-
<Code>animation-timeline: auto</Code> unless set otherwise. However, using this plugin and
98-
Tailwind CSS animations ensures that the declaration order is correct.
102+
This demo showcases how to create a simple progress bar just by adding one utility class to
103+
the element. We define the anonymous scroll timeline by adding <Code>timeline</Code> to the
104+
progress bar.
99105
</Paragraph>
100-
<CodeBlock language="css">{keyframes103}</CodeBlock>
101-
<Paragraph>Scroll the container.</Paragraph>
102-
<TimelineOverrideDemo />
103-
<Heading size={3} href="#timeline" hrefType="demo" id="documentation-animation-timeline">
104-
Animation Timeline
105-
</Heading>
106+
<ProgressBarDemo />
107+
<CodeBlock language="html">{progressBarDemo}</CodeBlock>
108+
<CodeBlock language="css">{progressBarKeyframes}</CodeBlock>
109+
<Heading size={3}>Anonymous View Timeline Demo</Heading>
106110
<Paragraph>
107-
Utility class specifying the timeline that is used to control the progress of a CSS
108-
animation.
111+
This demo showcases how to make the element appear after entering the view frame. We define
112+
the anonymous view timeline by adding <Code>timeline-view</Code> to this element.
109113
</Paragraph>
110-
<DocsTable items={animationTimelineClasses} />
111-
<Heading size={3} href="#range" hrefType="demo" id="documentation-scroll-timeline">
114+
<AppearDemo />
115+
<CodeBlock language="html">{appearDemo}</CodeBlock>
116+
<CodeBlock language="css">{appearKeyframes}</CodeBlock>
117+
118+
<Heading size={2}>Named Timelines</Heading>
119+
<Heading size={3} id="documentation-scroll-timeline">
112120
Scroll Timeline
113121
</Heading>
114122
<Paragraph>
115123
Utility class setting the named scroll progress timeline, which is set on a scrollable
116124
element.
117125
</Paragraph>
118126
<DocsTable items={scrollTimelineClasses} />
119-
<Heading size={3} href="#range" hrefType="demo" id="documentation-view-timeline">
127+
<Heading size={3} id="documentation-view-timeline">
120128
View Timeline
121129
</Heading>
122130
<Paragraph>
123131
Utility class setting the named view progress timeline, which is set on a subject inside
124132
another scrollable element.
125133
</Paragraph>
126134
<DocsTable items={viewTimelineClasses} />
127-
<Heading size={3} id="documentation-range">
135+
<Heading size={2} id="documentation-range">
128136
Animation Range
129137
</Heading>
130138
<Paragraph>
131139
Animation range start controls where along the timeline an animation will start. It is set
132140
on the animated element.
133141
</Paragraph>
134142
<DocsTable items={rangeClasses} />
135-
<Paragraph className="pt-6">
143+
<Heading size={3}>Animation Range Demo</Heading>
144+
<Paragraph>
136145
Scroll the container to see each how range utility class affects the animation.
137146
</Paragraph>
138147
<MultiRangeDemo />
139148
<CodeBlock language="html">{multiRange}</CodeBlock>
140149
<CodeBlock language="css">{multiRangeKeyframes}</CodeBlock>
141-
<Heading size={3} href="#range" hrefType="demo" id="documentation-scope">
150+
<Heading size={2} id="documentation-scope">
142151
Timeline Scope
143152
</Heading>
144153
<Paragraph>
145154
Timeline scope allows to control animations outside the element which defines the timeline.
146155
</Paragraph>
147156
<DocsTable items={scopeClasses} />
148-
<Heading size={3} id="documentation-fallback">
157+
<Heading size={3}>Range, Scope and Animation Timeline Name Demo</Heading>
158+
<Paragraph>
159+
This demo showcases the usage of the plugin to reveal the navigation bar. The{' '}
160+
<Code>view-timeline/navbar</Code> utility sets up the animation timeline, which is then
161+
scoped out of the defining element by <Code>scope/navbar</Code>. The navigation bar is
162+
controlled by this timeline with the <Code>timeline/navbar</Code> utility. Utility class{' '}
163+
<Code>range-on-exit</Code> is set to limit the timeline duration.
164+
</Paragraph>
165+
<RangeDemo />
166+
<CodeBlock language="html">{rangeDemo}</CodeBlock>
167+
<CodeBlock language="css">{rangeKeyframes}</CodeBlock>
168+
<Heading size={2} id="documentation-fallback">
149169
Fallback Styling
150170
</Heading>
151171
<Paragraph>
152172
Use the <Code>no-animations</Code> modifier to apply fallback styling in browsers which do
153173
not support scroll-driven animations yet.
154174
</Paragraph>
155175
<DocsTable items={supportsClasses} />
176+
<Heading size={3}>Fallback Demo</Heading>
156177
<SupportsDemo />
157178
<CodeBlock language="html">{supports}</CodeBlock>
158179
</div>

docs/src/docs/DocsTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DocsTableRow from './DocsTableRow'
33

44
const DocsTable = ({ items }: DocsTableProps) => {
55
return (
6-
<div className="flex flex-col gap-2 py-2">
6+
<div className="mb-6 flex flex-col gap-2 py-2">
77
<div className="flex gap-1 text-xs font-bold sm:gap-4">
88
<div className="pl-2 sm:w-80">Class</div>
99
<div className="block opacity-50 sm:hidden">/</div>

docs/src/main.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'
44
import './index.css'
55
import DocsView from './views/DocsView'
66
import TechView from './views/TechView'
7+
import HowToView from './views/HowToView'
78

89
const router = createBrowserRouter([
910
{
1011
path: '/',
12+
element: <HowToView />,
13+
errorElement: <HowToView />,
14+
},
15+
{
16+
path: '/docs',
1117
element: <DocsView />,
12-
errorElement: <DocsView />,
1318
},
1419
{
1520
path: '/tech',

docs/src/partials/Animations.tsx

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Github, Minus } from 'lucide-react'
1+
import { Github } from 'lucide-react'
22
import Code from '../components/Code.tsx'
33
import CodeBlock from '../components/CodeBlock.tsx'
44
import Heading from '../components/Heading.tsx'
@@ -14,19 +14,12 @@ import {
1414
const Animations = () => {
1515
return (
1616
<>
17-
<Heading size={2} id={'plugin'}>
18-
Plugin
17+
<Heading size={1} id={'plugin'}>
18+
Tech
1919
</Heading>
2020
<Heading size={3} id={'code'} href="/docs#documentation-animation-timeline">
2121
Animation Timeline
2222
</Heading>
23-
<Paragraph>
24-
The single most impressive feature of scroll-driven animations is an anonymous animation
25-
timeline. It allows user to easily trigger anything just by scrolling the page. Utility
26-
below allows user to use the <Code>timeline</Code> CSS class which defaults to{' '}
27-
<Code>animation-timeline: scroll(y)</Code> and also provides an option to set custom
28-
timeline name with a modifier.
29-
</Paragraph>
3023
<CodeBlock
3124
Icon={Github}
3225
linkHref={
@@ -39,11 +32,6 @@ const Animations = () => {
3932
<Heading size={3} href="/docs#documentation-scroll-timeline">
4033
Scroll and View Timeline
4134
</Heading>
42-
<Paragraph>
43-
Scroll and View timelines provide user with better control over the animations. Both{' '}
44-
<Code>scroll-timeline</Code> and <Code>view-timeline</Code> are meant to be used with
45-
modifiers to set the timeline name.
46-
</Paragraph>
4735
<CodeBlock
4836
Icon={Github}
4937
linkHref={
@@ -56,10 +44,6 @@ const Animations = () => {
5644
<Heading size={3} href="/docs#documentation-range">
5745
Range
5846
</Heading>
59-
<Paragraph>
60-
Animation range controls start and end of an animation. Utility class <Code>range</Code>{' '}
61-
offers multiple options with default value set to <Code>cover</Code>.
62-
</Paragraph>
6347
<CodeBlock
6448
Icon={Github}
6549
linkHref={
@@ -72,11 +56,6 @@ const Animations = () => {
7256
<Heading size={3} href="/docs#documentation-scope">
7357
Scope
7458
</Heading>
75-
<Paragraph>
76-
Timeline scope allows to control animations outside the element which defines the timeline.
77-
Utility <Code>scope</Code> should be used with a modifier to define the timeline name set by{' '}
78-
<Code>scroll-timeline</Code> or <Code>view-timeline</Code>.
79-
</Paragraph>
8059
<CodeBlock
8160
Icon={Github}
8261
linkHref={
@@ -86,13 +65,9 @@ const Animations = () => {
8665
>
8766
{codeExampleScope}
8867
</CodeBlock>
89-
<Heading size={3} href="/docs#documentation-fallback" hrefType="documentation">
68+
<Heading size={3} href="/docs#documentation-fallback">
9069
Fallback Styling
9170
</Heading>
92-
<Paragraph>
93-
Scroll-driven animations are not broadly supported yet. I decided to apply an
94-
animation-first approach. Use the <Code>no-animations</Code> modifier for fallback styling.
95-
</Paragraph>
9671
<CodeBlock
9772
Icon={Github}
9873
linkHref={

docs/src/partials/Demo.tsx

Lines changed: 0 additions & 59 deletions
This file was deleted.

docs/src/partials/Nav.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const Nav = () => {
66
return (
77
<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">
88
<div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-2 md:px-16 lg:px-20">
9-
<HeaderNavAnchor to="/">Docs</HeaderNavAnchor>
9+
<HeaderNavAnchor to="/">How To</HeaderNavAnchor>
10+
<HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
1011
<HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
1112
<div className="flex-1" />
1213
<DarkModeSwitch />

docs/src/views/DocsView.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import { WandSparkles } from 'lucide-react'
22
import Docs from '../docs/Docs'
33
import Page from '../layouts/Page'
4-
import Demo from '../partials/Demo'
5-
import Installation from '../partials/Installation'
6-
import MainTitle from '../partials/MainTitle'
74

85
const DocsView = () => {
96
return (
107
<Page>
11-
<MainTitle />
12-
<Installation />
138
<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">
149
<WandSparkles
1510
className="size-6 shrink-0 text-amber-500 dark:text-amber-600"
@@ -19,7 +14,6 @@ const DocsView = () => {
1914
see the demos working correctly.
2015
</div>
2116
<Docs />
22-
<Demo />
2317
</Page>
2418
)
2519
}

docs/src/views/HowToView.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Code from '../components/Code'
2+
import CodeBlock from '../components/CodeBlock'
3+
import Heading from '../components/Heading'
4+
import Paragraph from '../components/Paragraph'
5+
import TimelineOverrideDemo from '../demos/TimelineOverrideDemo'
6+
import Page from '../layouts/Page'
7+
import Installation from '../partials/Installation'
8+
import MainTitle from '../partials/MainTitle'
9+
import { keyframes101, keyframes102, keyframes103 } from '../utils/demoExamples'
10+
11+
const HowToView = () => {
12+
return (
13+
<Page>
14+
<MainTitle />
15+
<Paragraph>
16+
Unofficial and experimental plugin for Tailwind CSS v3.4+ that provides utilities for
17+
scroll-driven animations.
18+
</Paragraph>
19+
<Installation />
20+
<Heading size={2} id="documentation-101">
21+
How to Make Your CSS Animation Scroll-driven
22+
</Heading>
23+
<Paragraph>
24+
CSS animations consist of two components, a set of keyframes and a style describing the
25+
animation. Let's declare a simple <Code>@opacity</Code> keyframe set and apply it to an
26+
element we want to control by a scroll timeline.
27+
</Paragraph>
28+
<CodeBlock language="css">{keyframes101}</CodeBlock>
29+
<CodeBlock language="html">{keyframes102}</CodeBlock>
30+
<Paragraph>
31+
To effectively control the animation, make sure to declare the timeline in the code after
32+
the animation. By default, the shorthand <Code>animation</Code> property sets the{' '}
33+
<Code>animation-timeline: auto</Code> unless set otherwise. However, using this plugin and
34+
Tailwind CSS animations ensures that the declaration order is correct.
35+
</Paragraph>
36+
<CodeBlock language="css">{keyframes103}</CodeBlock>
37+
<Paragraph>Scroll the container.</Paragraph>
38+
<TimelineOverrideDemo />
39+
</Page>
40+
)
41+
}
42+
43+
export default HowToView

0 commit comments

Comments
 (0)