@@ -5,16 +5,21 @@ import Heading from '../components/Heading'
5
5
import Paragraph from '../components/Paragraph'
6
6
import MultiRangeDemo from '../demos/MultiRangeDemo'
7
7
import SupportsDemo from '../demos/SupportsDemo'
8
- import TimelineOverrideDemo from '../demos/TimelineOverrideDemo'
9
8
import {
10
- keyframes101 ,
11
- keyframes102 ,
12
- keyframes103 ,
9
+ appearDemo ,
10
+ appearKeyframes ,
13
11
multiRange ,
14
12
multiRangeKeyframes ,
13
+ progressBarDemo ,
14
+ progressBarKeyframes ,
15
+ rangeDemo ,
16
+ rangeKeyframes ,
15
17
supports ,
16
18
} from '../utils/demoExamples'
17
19
import DocsTable from './DocsTable'
20
+ import ProgressBarDemo from '../demos/ProgressBarDemo'
21
+ import AppearDemo from '../demos/AppearDemo'
22
+ import RangeDemo from '../demos/RangeDemo'
18
23
19
24
const animationTimelineClasses = [
20
25
{ className : 'timeline' , code : 'animation-timeline: scroll(y)' } ,
@@ -57,7 +62,7 @@ const supportsClasses = [
57
62
const Docs = ( ) => {
58
63
return (
59
64
< div >
60
- < Heading size = { 2 } id = "documentation" >
65
+ < Heading size = { 1 } id = "documentation" >
61
66
Documentation
62
67
</ Heading >
63
68
< Paragraph >
@@ -81,78 +86,94 @@ const Docs = () => {
81
86
< Code > timeline-scope</ Code >
82
87
</ li >
83
88
</ 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
86
92
</ Heading >
87
93
< 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.
91
98
</ 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 >
94
101
< 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.
99
105
</ 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 >
106
110
< 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 .
109
113
</ 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" >
112
120
Scroll Timeline
113
121
</ Heading >
114
122
< Paragraph >
115
123
Utility class setting the named scroll progress timeline, which is set on a scrollable
116
124
element.
117
125
</ Paragraph >
118
126
< DocsTable items = { scrollTimelineClasses } />
119
- < Heading size = { 3 } href = "#range" hrefType = "demo" id = "documentation-view-timeline" >
127
+ < Heading size = { 3 } id = "documentation-view-timeline" >
120
128
View Timeline
121
129
</ Heading >
122
130
< Paragraph >
123
131
Utility class setting the named view progress timeline, which is set on a subject inside
124
132
another scrollable element.
125
133
</ Paragraph >
126
134
< DocsTable items = { viewTimelineClasses } />
127
- < Heading size = { 3 } id = "documentation-range" >
135
+ < Heading size = { 2 } id = "documentation-range" >
128
136
Animation Range
129
137
</ Heading >
130
138
< Paragraph >
131
139
Animation range start controls where along the timeline an animation will start. It is set
132
140
on the animated element.
133
141
</ Paragraph >
134
142
< DocsTable items = { rangeClasses } />
135
- < Paragraph className = "pt-6" >
143
+ < Heading size = { 3 } > Animation Range Demo</ Heading >
144
+ < Paragraph >
136
145
Scroll the container to see each how range utility class affects the animation.
137
146
</ Paragraph >
138
147
< MultiRangeDemo />
139
148
< CodeBlock language = "html" > { multiRange } </ CodeBlock >
140
149
< CodeBlock language = "css" > { multiRangeKeyframes } </ CodeBlock >
141
- < Heading size = { 3 } href = "#range" hrefType = "demo" id = "documentation-scope" >
150
+ < Heading size = { 2 } id = "documentation-scope" >
142
151
Timeline Scope
143
152
</ Heading >
144
153
< Paragraph >
145
154
Timeline scope allows to control animations outside the element which defines the timeline.
146
155
</ Paragraph >
147
156
< 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" >
149
169
Fallback Styling
150
170
</ Heading >
151
171
< Paragraph >
152
172
Use the < Code > no-animations</ Code > modifier to apply fallback styling in browsers which do
153
173
not support scroll-driven animations yet.
154
174
</ Paragraph >
155
175
< DocsTable items = { supportsClasses } />
176
+ < Heading size = { 3 } > Fallback Demo</ Heading >
156
177
< SupportsDemo />
157
178
< CodeBlock language = "html" > { supports } </ CodeBlock >
158
179
</ div >
0 commit comments