Skip to content

Commit d297bdc

Browse files
author
Adam Plesnik
committed
Add fallback, tune things
1 parent 78f3735 commit d297bdc

File tree

7 files changed

+57
-54
lines changed

7 files changed

+57
-54
lines changed

‎docs/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<!doctype html>
2-
<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
2+
<html
3+
lang="en"
4+
class="scroll-smooth bg-slate-100 text-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
5+
>
36
<head>
47
<meta charset="UTF-8" />
58
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎docs/src/components/ChartColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const ChartColumn = ({ className = '' }: ChartColumnProps) => {
55
<div className="relative flex h-full w-4 items-end bg-gray-200/50 dark:bg-gray-800/50">
66
<div
77
className={
8-
'timeline/chart range-on-entry/60px,80dvh animate-rise h-0 w-full rounded-t-full bg-gradient-to-tr from-cyan-300 to-indigo-300/50 dark:from-zinc-400 dark:to-zinc-500 ' +
8+
'timeline/chart range-on-entry/60px,80dvh animate-rise no-animations:h-full h-0 w-full rounded-t-full bg-gradient-to-tr from-cyan-300 to-indigo-300/50 dark:from-zinc-400 dark:to-zinc-500 ' +
99
addWithSpace(className)
1010
}
1111
></div>

‎docs/src/css/keyframes.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@keyframes gradient {
22
from {
3-
opacity: 0;
43
background-size: 33% 100%;
54
}
65
10% {

‎docs/src/layouts/Page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import CenterLayout from './CenterLayout'
44

55
function Page({ children }: PropsWithChildren<PageProps>) {
66
return (
7-
<div className="flex flex-col items-center justify-center">
7+
<>
88
<CenterLayout className="p-8">{children}</CenterLayout>
99
<ScrollRestoration />
10-
</div>
10+
</>
1111
)
1212
}
1313

‎docs/src/pages/HomePage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Page from '../layouts/Page.tsx'
12
import HeroAnim from '../partials/HeroAnim.tsx'
23
import Nav from '../partials/Nav.tsx'
34

@@ -6,6 +7,7 @@ const HomePage = () => {
67
<>
78
<Nav />
89
<HeroAnim />
10+
<Page>hello</Page>
911
</>
1012
)
1113
}

‎docs/src/partials/HeroAnim.tsx

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { ArrowDown } from 'lucide-react'
22
import ChartColumn from '../components/ChartColumn'
33
import Code from '../components/Code'
4-
import CodeBlock from '../components/CodeBlock'
5-
import Paragraph from '../components/Paragraph'
64
import TimelineMarker from '../components/TimelineMarker'
75
import CenterLayout from '../layouts/CenterLayout'
86

@@ -19,13 +17,7 @@ const columns = [
1917

2018
const gradient = `<div class="animate-gradient timeline range/0,2000px"></div>`
2119
const html = `<div class="animate-reveal timeline-view"></div>`
22-
const chart = `<div class="animate-rise timeline/chart range-on-entry/60px,320px"></div>`
23-
const css = `@keyframes reveal {
24-
50% {
25-
opacity: 1;
26-
transform: scale(3);
27-
}
28-
}`
20+
const chart = `<div class="animate-rise timeline/chart range-on-entry/60px,80dvh"></div>`
2921

3022
const HeroAnim = () => {
3123
return (
@@ -35,27 +27,41 @@ const HeroAnim = () => {
3527
<ArrowDown size={24} className="animate-bounce" />
3628
</div>
3729
</CenterLayout>
38-
<div className="h-[2000px]">
39-
<CenterLayout className="animate-gradient timeline range/0,2000px sticky top-40 bg-gradient-to-r from-violet-200/0 via-red-400/70 to-cyan-300/0 bg-clip-text bg-no-repeat pb-12 text-5xl font-bold text-transparent dark:via-red-600/70 sm:text-7xl md:text-9xl">
40-
Scroll Superpower.
41-
</CenterLayout>
42-
</div>
30+
<CenterLayout className="h-[2000px]">
31+
<div className="relative h-full w-full">
32+
<TimelineMarker
33+
textStart="timeline"
34+
textEnd="from 0"
35+
className="absolute left-0 top-24 w-full"
36+
/>
37+
<div className="animate-gradient no-animations:opacity-100 timeline range/0,2000px sticky top-40 bg-gradient-to-r from-violet-200/0 via-red-400/70 to-cyan-300/0 bg-clip-text bg-no-repeat pb-12 text-5xl font-bold text-transparent opacity-0 dark:via-red-600/70 sm:text-7xl md:text-9xl">
38+
Scroll Superpower.
39+
</div>
40+
<TimelineMarker
41+
textStart="timeline"
42+
textEnd="to 2000px"
43+
className="absolute left-0 bottom-8 w-full"
44+
/>
45+
</div>
46+
</CenterLayout>
4347
<CenterLayout>
44-
<Code language="html" className="mx-auto mb-48 block w-fit">
48+
<Code language="html" className="mx-auto mb-72 block w-fit">
4549
{gradient}
4650
</Code>
4751
</CenterLayout>
48-
<div>
49-
<div className="h-dvh sticky top-0 w-full bg-gradient-to-r from-slate-200/0 via-zinc-400/50 to-cyan-300/10">
50-
<CenterLayout className="h-dvh relative flex flex-col justify-between px-4 py-14 sm:px-8">
52+
<div className="mb-72">
53+
<div className="h-dvh sticky top-0 w-full">
54+
<CenterLayout className="h-dvh relative flex flex-col justify-between px-4 py-16 sm:px-8">
5155
<TimelineMarker textStart="timeline-view" textEnd={'100%'} />
56+
<TimelineMarker textEnd={'75%'} />
5257
<TimelineMarker textEnd={'50%'} />
58+
<TimelineMarker textEnd={'25%'} />
5359
<TimelineMarker textStart="timeline-view" textEnd={'0%'} />
5460
</CenterLayout>
5561
</div>
5662
<div className="min-h-dvh">
5763
<CenterLayout className="relative z-20">
58-
<div className="animate-reveal timeline-view mx-auto w-fit text-center opacity-0">
64+
<div className="animate-reveal timeline-view no-animations:opacity-100 mx-auto w-fit text-center opacity-0">
5965
<div className="text-md text-zinc-950 w-full font-medium dark:text-zinc-200 sm:text-lg md:text-xl">
6066
'Luke, he is your father.'
6167
</div>
@@ -66,41 +72,36 @@ const HeroAnim = () => {
6672
</CenterLayout>
6773
</div>
6874
</div>
69-
<div>
70-
<div className="h-dvh scope/chart sticky top-0 mt-20 flex w-full items-center bg-gradient-to-t from-fuchsia-200/50 to-red-300/0">
75+
<div className="mb-72">
76+
<div className="h-dvh scope/chart sticky top-0 mt-20 flex w-full items-center">
7177
<CenterLayout className="h-dvh flex flex-col items-center justify-center px-20">
72-
<div className="relative flex h-2/3 w-full items-center justify-between py-2.5 pl-20 pr-2">
78+
<div className="relative flex h-2/3 w-full items-center justify-between py-2.5 pl-32 pr-20">
7379
{columns.map((column, i) => (
7480
<ChartColumn className={column} key={i} />
7581
))}
76-
<TimelineMarker textStart="100%" className="absolute left-0 top-0 w-full" />
7782
<TimelineMarker
78-
textStart="50%"
83+
textStart="entry + 80dvh"
84+
textEnd="100%"
85+
className="absolute left-0 top-0 w-full"
86+
/>
87+
<TimelineMarker
88+
textEnd="50%"
7989
className="top-50% absolute left-0 w-full -translate-y-1"
8090
/>
81-
<TimelineMarker textStart="0%" className="absolute left-0 bottom-0 w-full" />
91+
<TimelineMarker
92+
textStart="entry +60px"
93+
textEnd="0%"
94+
className="absolute left-0 bottom-0 w-full"
95+
/>
96+
<TimelineMarker textStart="entry" className="absolute left-0 -bottom-12 w-full" />
8297
</div>
83-
<Code className="view-timeline/chart mx-auto mt-12 block w-fit" language="html">
98+
<Code className="view-timeline/chart mx-auto mt-14 block w-fit" language="html">
8499
{chart}
85100
</Code>
86101
</CenterLayout>
87102
</div>
88103
<div className="min-h-dvh"></div>
89104
</div>
90-
<div>
91-
<CenterLayout>
92-
<CodeBlock language="css" className="backdrop-blur-sm">
93-
{css}
94-
</CodeBlock>
95-
<CodeBlock language="html" className="backdrop-blur-sm">
96-
{html}
97-
</CodeBlock>
98-
<Paragraph>
99-
Unofficial plugin for Tailwind CSS v3.4+ that provides utilities for scroll-driven
100-
animations.
101-
</Paragraph>
102-
</CenterLayout>
103-
</div>
104105
</>
105106
)
106107
}

‎docs/src/partials/Nav.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
import { ArrowUpRight, Github } from 'lucide-react'
2-
import DarkModeSwitch from '../components/DarkModeSwitch.tsx'
1+
import { Github } from 'lucide-react'
32
import { NavLink } from 'react-router-dom'
3+
import DarkModeSwitch from '../components/DarkModeSwitch.tsx'
44
import CenterLayout from '../layouts/CenterLayout.tsx'
55

66
const Nav = () => {
77
return (
8-
<div className="sticky top-0 z-50 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-zinc-900/60 dark:text-zinc-300">
8+
<div className="sticky top-0 z-50 flex h-12 items-stretch 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-zinc-900/60 dark:text-zinc-300">
99
<CenterLayout className="flex items-center gap-2">
10-
<span className="text-sm font-semibold">scrollmations</span>
11-
<NavLink to="/#plugin">Plugin</NavLink>
12-
<NavLink to="/docs#documentation">Docs</NavLink>
13-
<NavLink to="https://adamplesnik.com">
14-
Me <ArrowUpRight className="size-4 ml-2" />
10+
<NavLink to="/">
11+
<span className="text-sm font-semibold">scrollmations</span>
1512
</NavLink>
13+
<NavLink to="/docs#documentation">Docs</NavLink>
1614
<div className="flex-1" />
1715
<DarkModeSwitch />
1816
<a
1917
href="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"
2018
target="_blank"
2119
className="size-8 group flex items-center justify-center self-center rounded-full p-1.5 transition-colors duration-200 hover:bg-white/40 dark:hover:bg-slate-500/60"
2220
>
23-
<Github className="group-hover:animate-bounce-bottom" />
21+
<Github className="group-hover:animate-bounce" />
2422
</a>
2523
</CenterLayout>
2624
</div>

0 commit comments

Comments
 (0)