Skip to content

Commit dbe8285

Browse files
author
Adam Plesnik
committed
Update docs, demos
1 parent 97873c8 commit dbe8285

File tree

12 files changed

+84
-28
lines changed

12 files changed

+84
-28
lines changed

‎src/components/DemoAnimationExampleRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const DemoAnimationExampleRow = ({ animations, timeline }: DemoAnimationExampleR
77
<div className="flex items-center gap-2 sm:flex-col sm:items-start">
88
<div className="w-36 flex-shrink-0">
99
{animationClasses.map((animation) => (
10-
<Code key={animation}>.{animation}</Code>
10+
<Code key={animation}>{animation}</Code>
1111
))}
1212
</div>
1313
<div className="relative w-full flex-1 rounded-full bg-slate-300/40 text-sm sm:flex-none dark:bg-slate-300/20">

‎src/demos/AppearDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const AppearDemo = () => {
2828
</div>
2929
<DemoTriggerLine percentage={0} explanation="The element enters the frame" />
3030
<div className="flex h-24 w-full animate-appear flex-wrap items-center gap-x-4 gap-y-1 rounded bg-sky-500/40 p-4 timeline-view dark:bg-fuchsia-300/60">
31-
<Code>.animate-appear</Code> <Code>.timeline-view</Code>
31+
<Code>animate-appear</Code> <Code>timeline-view</Code>
3232
</div>
3333
<DemoTriggerLine percentage={100} explanation="The element leaves the frame" />
3434
<div className="my-8">

‎src/demos/MultiRangeDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const MultiRangeDemo = () => {
3535
</div>
3636
<DemoTriggerLine />
3737
<div className="px-2 py-4 view-timeline/demo sm:px-4">
38-
<Code>.view-timeline/demo</Code>
38+
<Code>view-timeline/demo</Code>
3939
</div>
4040
<DemoTriggerLine />
4141
<div className="py-8">

‎src/demos/ProgressBarDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const ProgressBarDemo = () => {
99
return (
1010
<DemoWrapper>
1111
<div className="sticky top-0 z-10 flex w-0 animate-scale-to-right gap-2 overflow-hidden rounded-md bg-sky-500/80 timeline dark:bg-fuchsia-500/80">
12-
<Code>.animate-scale-to-right</Code> <Code>.timeline</Code>
12+
<Code>animate-scale-to-right</Code> <Code>timeline</Code>
1313
</div>
1414
<div className="px-4 sm:px-8">
1515
<DemoTriggerLine

‎src/demos/RangeDemo.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ const RangeDemo = () => {
1111
<DemoWrapper>
1212
<div className="no-animations:mt-0 -mt-14 text-sm scope/navbar sm:-mt-8">
1313
<div className="no-animations:translate-y-0 sticky top-0 z-10 flex -translate-y-16 animate-translate-down flex-wrap gap-1 bg-sky-400/60 p-4 backdrop-blur timeline/navbar range-on-exit dark:bg-fuchsia-600/60 ">
14-
<Code>.animate...</Code>
15-
<Code>.timeline/navbar</Code>
16-
<Code>.range-on-exit</Code>
14+
<Code>animate...</Code>
15+
<Code>timeline/navbar</Code>
16+
<Code>range-on-exit</Code>
1717
</div>
1818
<div className="no-animations:mt-12 mt-4 px-4 sm:px-8">
19-
<Code>.scope/navbar</Code>
19+
<Code>scope/navbar</Code>
2020
</div>
2121
<DemoPlaceholderContent>
2222
<Skeleton />
@@ -28,7 +28,7 @@ const RangeDemo = () => {
2828
className="mt-8"
2929
/>
3030
<div className="w-full rounded p-4 view-timeline/navbar">
31-
<Code>.view-timeline/navbar</Code>
31+
<Code>view-timeline/navbar</Code>
3232
</div>
3333
<DemoTriggerLine
3434
percentage={100}

‎src/demos/SupportsDemo.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Code from '../components/Code'
2+
import Skeleton from '../components/Skeleton'
3+
import DemoWrapper from './DemoWrapper'
4+
5+
const skeletonCollection = [
6+
'96%',
7+
'100%',
8+
'92%',
9+
'100%',
10+
'93%',
11+
'75%',
12+
'32%',
13+
'96%',
14+
'100%',
15+
'92%',
16+
'100%',
17+
'93%',
18+
'75%',
19+
'32%',
20+
]
21+
22+
const SupportsDemo = () => {
23+
return (
24+
<DemoWrapper className="mt-4">
25+
<div className="no-animations:translate-y-0 sticky left-4 top-0 flex w-fit -translate-y-20 animate-translate-down flex-wrap gap-2 rounded-b-lg bg-sky-400/40 p-4 backdrop-blur timeline sm:left-8 dark:bg-fuchsia-600/40">
26+
<Code>animate...</Code>
27+
<Code>timeline</Code>
28+
<Code>-translate-y-20</Code>
29+
<Code>no-animations:translate-0</Code>
30+
</div>
31+
<div className="no-animations:mt-0 -mt-12 p-4 sm:p-8">
32+
<Skeleton />
33+
{skeletonCollection.map((width, key) => (
34+
<Skeleton width={width} key={key} />
35+
))}
36+
</div>
37+
</DemoWrapper>
38+
)
39+
}
40+
41+
export default SupportsDemo

‎src/docs/Docs.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import CodeBlock from '../components/CodeBlock'
33
import Heading from '../components/Heading'
44
import Paragraph from '../components/Paragraph'
55
import MultiRangeDemo from '../demos/MultiRangeDemo'
6-
import { multiRange, multiRangeKeyframes } from '../utils/demoExamples'
6+
import SupportsDemo from '../demos/SupportsDemo'
7+
import { multiRange, multiRangeKeyframes, supports } from '../utils/demoExamples'
78
import DocsTable from './DocsTable'
89

910
const animationTimelineClasses = [
@@ -101,10 +102,12 @@ const Docs = () => {
101102
Fallback Styling
102103
</Heading>
103104
<Paragraph>
104-
Use the modifier <Code>no-animations:</Code> to apply fallback styling in browsers which do
105+
Use the <Code>no-animations</Code> modifier to apply fallback styling in browsers which do
105106
not support scroll-driven animations yet.
106107
</Paragraph>
107-
<DocsTable items={supportsClasses} />
108+
<DocsTable items={supportsClasses} noDots />
109+
<SupportsDemo />
110+
<CodeBlock language="html">{supports}</CodeBlock>
108111
</div>
109112
)
110113
}

‎src/docs/DocsTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Separator from '../components/Separator'
22
import DocsTableRow from './DocsTableRow'
33

4-
const DocsTable = ({ items }: DocsTableProps) => {
4+
const DocsTable = ({ items, noDots = false }: DocsTableProps) => {
55
return (
66
<div className="flex flex-col gap-2 py-2">
77
<div className="flex gap-1 text-xs font-bold sm:gap-4">
@@ -12,7 +12,7 @@ const DocsTable = ({ items }: DocsTableProps) => {
1212
<Separator />
1313
{items.map((item, index) => (
1414
<>
15-
<DocsTableRow className={item.className} code={item.code} key={index} />
15+
<DocsTableRow className={item.className} code={item.code} key={index} noDots={noDots} />
1616
<Separator key={'sep' + index} />
1717
</>
1818
))}
@@ -22,6 +22,7 @@ const DocsTable = ({ items }: DocsTableProps) => {
2222

2323
export interface DocsTableProps {
2424
items: Item[]
25+
noDots?: boolean
2526
}
2627

2728
export interface Item {

‎src/docs/DocsTableRow.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
const DocsTableRow = ({ className, code }: DocsTableRowProps) => {
1+
const DocsTableRow = ({ className, code, noDots = false }: DocsTableRowProps) => {
22
return (
33
<div className="flex flex-col gap-1 font-mono text-sm sm:flex-row sm:gap-4">
4-
<div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">.{className}</div>
4+
<div className="px-2 text-zinc-900 sm:w-80 dark:text-zinc-300">
5+
{noDots ? '' : '.'}
6+
{className}
7+
</div>
58
<div className="flex-1 pl-8 pr-2 text-sky-700 sm:pl-2 dark:text-sky-300">{code};</div>
69
</div>
710
)
@@ -10,6 +13,7 @@ const DocsTableRow = ({ className, code }: DocsTableRowProps) => {
1013
export interface DocsTableRowProps {
1114
className: string
1215
code: string
16+
noDots?: boolean
1317
}
1418

1519
export default DocsTableRow

‎src/partials/Animations.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Animations = () => {
4545
<Paragraph>
4646
The single most impressive feature of scroll-driven animations is an anonymous animation
4747
timeline. It allows user to easily trigger anything just by scrolling the page. Utility
48-
below allows user to use the <Code>.timeline</Code> CSS class which defaults to{' '}
48+
below allows user to use the <Code>timeline</Code> CSS class which defaults to{' '}
4949
<Code>animation-timeline: scroll(y)</Code> and also provides an option to set custom
5050
timeline name with a modifier.
5151
</Paragraph>
@@ -63,7 +63,7 @@ const Animations = () => {
6363
</Heading>
6464
<Paragraph>
6565
Scroll and View timelines provide user with better control over the animations. Both{' '}
66-
<Code>.scroll-timeline</Code> and <Code>.view-timeline</Code> are meant to be used with
66+
<Code>scroll-timeline</Code> and <Code>view-timeline</Code> are meant to be used with
6767
modifiers to set the timeline name.
6868
</Paragraph>
6969
<CodeBlock
@@ -79,7 +79,7 @@ const Animations = () => {
7979
Range
8080
</Heading>
8181
<Paragraph>
82-
Animation range controls start and end of an animation. Utility class <Code>.range</Code>{' '}
82+
Animation range controls start and end of an animation. Utility class <Code>range</Code>{' '}
8383
offers multiple options with default value set to <Code>cover</Code>.
8484
</Paragraph>
8585
<CodeBlock
@@ -96,8 +96,8 @@ const Animations = () => {
9696
</Heading>
9797
<Paragraph>
9898
Timeline scope allows to control animations outside the element which defines the timeline.
99-
Utility <Code>.scope</Code> should be used with a modifier to define the timeline name set
100-
by <Code>.scroll-timeline</Code> or <Code>.view-timeline</Code>.
99+
Utility <Code>scope</Code> should be used with a modifier to define the timeline name set by{' '}
100+
<Code>scroll-timeline</Code> or <Code>view-timeline</Code>.
101101
</Paragraph>
102102
<CodeBlock
103103
Icon={Github}
@@ -113,7 +113,7 @@ const Animations = () => {
113113
</Heading>
114114
<Paragraph>
115115
Scroll-driven animations are not broadly supported yet. I decided to apply an
116-
animation-first approach. Use a modifier <Code>no-animations</Code> for fallback styling.
116+
animation-first approach. Use the <Code>no-animations</Code> modifier for fallback styling.
117117
</Paragraph>
118118
<CodeBlock
119119
Icon={Github}

0 commit comments

Comments
 (0)