Skip to content

Commit 2ade123

Browse files
mantarohmantaroh
committed
Rework use case
1 parent 6d63c34 commit 2ade123

11 files changed

Lines changed: 650 additions & 69 deletions

‎Overview.bs‎

Lines changed: 278 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -55,98 +55,307 @@ provided it behaves as if the underlying programming interfaces were in place.
5555

5656
# Use cases # {#use-cases}
5757

58-
ScrollTimeline {#scroll-timeline-use-case}
59-
-----------------------------------
60-
Here’s an example of scrollable page contents including the animated element.
61-
This animated element is indicated the navigation of content.
62-
For example, If we scrolled to the half of page, then animation of navigation will advance to 50%.
63-
64-
Usually we should detect the scroll event from DOM, and then manipulate the animation via Web Animations API or CSS.
65-
66-
<img src="img/Usecase1.png" width="600"
67-
alt="Usecase 1: ScrollTimeline">
68-
69-
If we use this API in this case, the example code is as follow.
58+
<div class='informative-bg'>
59+
60+
## Scroll-triggered Animations ## {#scroll-triggered-animations-usecase}
61+
62+
### The navigation highlight effect ### {#navigation-highlight-effect-usecase}
63+
Here's an example of scroll-trigger animations which change the highlight of navigation bar based on scroll position.
64+
This navigation menu's transparency will became clear when viewing the related content.
65+
66+
<figure>
67+
<img src="img/usecase1-1.svg" width="600"
68+
alt="Use case 1-1: The navigation highlight effect.">
69+
<figcaption>
70+
Use case 1: The navigation highlight effect.<br>
71+
The left figure is before scroll, current viewing content is abstract section. So highlighted the abstract menu.<br>
72+
The right figure is after scroll, current viewing content is background section. So highlighted the background menu.
73+
</figcaption>
74+
</figure>
75+
76+
We can use the CSS in order to build this content:
77+
<pre class="lang-css">
78+
@keyframes menu-effect {
79+
from {
80+
opacity: 0.5;
81+
}
82+
to {
83+
opacity: 1.0;
84+
}
85+
}
86+
87+
div.menu {
88+
animation: 5s linear 2 alternate both menu-effect;
89+
}
90+
91+
div#abstractMenu {
92+
animation-trigger: scroll(element(abstractMenuDiv), vertical, 0px, 200px);
93+
}
94+
95+
div#backgroundMenu {
96+
animation-trigger: scroll(element(backgroundMenuDiv), vertical, 150px, 350px);
97+
}
98+
</pre>
99+
<br/>
100+
We can use the JavaScript instead of the CSS.
70101
<pre class='lang-javascript'>
71-
var animation = div.getAnimations()[0];
72-
animation.timeline = new ScrollTimeline(
73-
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
74-
scrollOffset: 'auto',
75-
endScrollOffset: 'auto' })});
102+
var abstractMenuAnimation = abstractMenuDiv.getAnimations()[0];
103+
abstractMenuAnimation.timeline = new DocumentTimeline(
104+
{ trigger: new ScrollTrigger({ scrollSource: scrollableMainContent,
105+
orientation: "vertical",
106+
scrollOffset: '0px' }) });
76107
</pre>
77108

78-
DocumentTimeline with ScrollTringger {#document-timeline-with-scrolltrigger-use-case}
79-
-----------------------------------
80-
The animations will use the document timeline, but some people will want to trigger these animation when reaching certain position in the content.
109+
### The navigation position effect ### {#navigation-position-effect-usecase}
110+
Several contents are separating the initial page and main content page. So if we build single page content, we may need to use the scroll-triggered animation.
111+
112+
Here's example for using the scroll-triggered animations.
113+
This content has a navigation bar, this navigation icon is displayed a large icon when viewing initial view. However, this navigation will become a small icon , when scrolling contents.
114+
115+
<figure>
116+
<img src="img/usecase1-2.svg" width="600"
117+
alt="Use case 1-2: Scroll based animation.">
118+
<figcaption>
119+
Use case 1-2: Scroll based animations.<br>
120+
The left figure is before scroll, menu icon is large.<br>
121+
The right figure is after scroll, menu icon become small.
122+
</figcaption>
123+
</figure>
124+
125+
We can build this content using the CSS.
126+
<pre class='lang-css'>
127+
@keyframes navigationbar-effect {
128+
from {
129+
transform: scale(1.0, 1.0);
130+
}
131+
to {
132+
transform: scale(0.5, 0.5);
133+
}
134+
}
135+
136+
div.menu {
137+
animation: 1s linear navigationbar-effect;
138+
animation-trigger: scroll(element(scrollableElement), vertical, 0px, 100px);
139+
}
140+
</pre>
81141

82-
This use case is as follow:
142+
We can build this example content as JavaScript.
143+
<pre class='lang-javascript'>
144+
var animation = menuDiv.getAnimations()[0];
145+
146+
animation.timeline = new DocumentTimeline({
147+
trigger: new ScrollTrigger({ scrollSource: scrollableElement,
148+
orientation: "vertical",
149+
scrollOffset: "0px",
150+
endScrollOffset: "100px"})});
151+
</pre>
83152

84-
Here’s an sample content including the animation.
85-
This animation will start when reaching the 300px, this value is that user can view this animation’s element.
153+
## Scroll-triggered style changes ## {#scroll-triggered-style-changes-usecase}
154+
155+
### The fixed navigation bar ### {#fixed-menu-bar-usecase}
156+
The content of displaying the menu bar is the commonplace web content.
157+
Usually, these menu bar is fixed always. But some content will want to fix menu bar when
158+
scrolling certain position.
159+
Here's the example content for scroll-triggered based changing styles.
160+
This example has a menu bar on the right of content, and this content has a large title content.
161+
This position of navigation bar will be fixed after exceeding the certain scroll position.
162+
163+
Usually, we can implement using to the scroll event. However, If we use the @trigger rule, we can implement this more simply.
164+
165+
<figure>
166+
<img src="img/usecase2.svg" width="600"
167+
alt="Use case 2: Scroll based styling">
168+
<figcaption>
169+
Use case 2: Scroll based styling.<br>
170+
The left figure is before scroll, menubar's position is not fixed.<br>
171+
The right figure is after scroll, menubar's position is fixed.
172+
</figcaption>
173+
</figure>
174+
175+
If we use animation-trigger style sheet, this example code will be as follow:
176+
<pre class='lang-css'>
177+
div#menu-bar {
178+
position: relative;
179+
top: 10px;
180+
}
181+
182+
@trigger scroll(element(#scrollableContent), vertical, 200px) {
183+
#menu-bar {
184+
position: fixed;
185+
top: 10px;
186+
}
187+
}
188+
</pre>
86189

87-
<img src="img/Usecase2.png" width="300"
88-
alt="Usecase 2: DocumentTimeline with ScrollTrigger">
190+
## Scroll-linked animations ## {#scroll-linked-animations-usecase}
191+
192+
### Scrollable picture-story show ### {#scrollable-animation-usecase}
193+
There are many animation contents which used the 3rd vendor plugins. These content can detect scroll event, and this content has interactive animation.
194+
195+
Here's content has interactive animation too, it is a picture-story show. If we scrolled this content, the character of story will move.
196+
197+
If we scrolled opposite direction, this animation move to the opposite direction(reverse).
198+
199+
<figure>
200+
<img src="img/usecase3-1.svg" width="600"
201+
alt="Use case 3-1: The picture-story show.">
202+
<figcaption>
203+
Use case 3-1: The picture-story show.<br>
204+
The left figure is before scroll, this picture-story show didn't start.<br>
205+
The right figure is after scroll, this story will start.
206+
</figcaption>
207+
</figure>
208+
209+
If we use animation-timeline, example code will be as follow.
210+
<pre class='lang-css'>
211+
@keyframes leftCircleAnimation {
212+
from {
213+
margin-left: 200px;
214+
}
215+
to {
216+
margin-left: 300px;
217+
}
218+
}
219+
@keyframes rightCircleAnimation {
220+
from {
221+
margin-left: 450px;
222+
}
223+
to {
224+
margin-left: 350px;
225+
}
226+
}
227+
@keyframes unionCircleAnimation {
228+
from {
229+
opacity: 0.0;
230+
}
231+
to {
232+
opacity: 1.0;
233+
}
234+
}
235+
div#leftCircle {
236+
animation: 1s linear leftCircleAnimation;
237+
animation-trigger: scroll(element(#scrollableContainer), vertical, "200px", "300px");
238+
animation-timeline: scroll();
239+
}
240+
div#rightCircle {
241+
animation: 1s linear rightCircleAnimation;
242+
animation-trigger: scroll(element(#scrollableContainer), vertical, "200px", "300px");
243+
animation-timeline: scroll();
244+
}
245+
div#unionCircle {
246+
animation: 1s linear unionCircle;
247+
animation-trigger: scroll(element(#scrollableContainer), vertical, "250px", "300px");
248+
}
249+
</pre>
89250

90251
If we use this API for this case, the example code will be as follow:
91252
<pre class='lang-javascript'>
92-
var animation = div.getAnimations()[0];
93-
animation.timeline = new DocumentTimeline(
94-
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
95-
scrollOffset: '300px' }) });
253+
var leftCircleAnimation = leftCircle.getAnimations()[0];
254+
var rightCircleAnimation = rightCircle.getAnimations()[0];
255+
var unionCircleAnimation = unionCircle.getAnimations()[0];
256+
257+
var accelerationTimeline = new ScrollTimeline({
258+
trigger: new ScrollTrigger({
259+
scrollSource: scrollableElement,
260+
scrollOffset: '200px',
261+
endScrollOffset: '300px'})});
262+
263+
leftCircleAnimation.timeline = accelerationTimeline;
264+
rightCircleAnimation.timeline = accelerationTimeline;
265+
unionCircleAnimation.timeline = new ScrollTimeline({
266+
trigger: new ScrollTrigger({
267+
scrollSource:scrollableElement,
268+
scrollOffset: '250px',
269+
endScrollOffset: '300px'})});
96270
</pre>
97271

98-
ScrollTimeline with scroll range {#scroll-timeline-with-scroll-range-use-case}
99-
-----------------------------------
100-
This use case is similar to ScrollTimeline.
101-
The difference is that there are scroll range in order to enable the animation.
102-
Once scroll position will be out of range, the animation will cancel.
103-
104-
This use case is as follow:
105-
106-
Here’s an example content like picture-story show with animated element.
107-
The developer want to show the animated element when scroll position reach the certain position,
108-
and she want to cancel the animation when scroll position is out of range.(perhaps when we can’t see these element.)
109-
110-
<img src="img/usecase3.png" width="600"
111-
alt="Usecase 3: ScrollTimeline with scroll range">
272+
### The content progress bar ### {#content-progress-bar-usecase}
273+
There is much content that using to scroll linked animations.
274+
Here's one of these animation content, this content has a long article.
275+
And this content has a progress bar which indicates the current position of the article.
276+
277+
If we scroll the content, this progress bar increased / decreased.
278+
279+
<figure>
280+
<img src="img/usecase3-2.svg" width="600"
281+
alt="Use case 3-2: Scroll based styling">
282+
<figcaption>
283+
Use case 3-2: Content progress bar.<br>
284+
The left figure is before scroll, the progress bar is not displayed.<br>
285+
The right figure is after scroll, the progress bar advanced.
286+
</figcaption>
287+
</figure>
288+
289+
Usually, we won't need to this progress bar, because the scroll bar indicated the progress. But some content will want to hide the scroll bar, like this content.
290+
291+
If we use animation-timeline, this example code will be as follow.
292+
<pre class='lang-css'>
293+
@keyframes progressAnimation {
294+
from {
295+
width: 0px;
296+
}
297+
to {
298+
width: 500px;
299+
}
300+
}
301+
div#progress {
302+
width: 50%;
303+
height: 30px;
304+
background: red;
305+
animation: 1s linear progressAnimation;
306+
animation-trigger: scroll(element(#scrollableContainer), vertical);
307+
animation-timeline: scroll();
308+
}
309+
</pre>
112310

113311
If we use this API for this case, the example code will be as follow:
114312
<pre class='lang-javascript'>
115-
// We enable the animation within the range[300px-800px].
116-
var animation = div.getAnimations()[0];
117-
animation.timeline = new ScrollTimeline(
118-
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
119-
scrollOffset: '300px',
120-
endScrollOffset: '800px'}) });
313+
var animation = div.getAnimations()[0];
314+
animation.timeline = new ScrollTimeline(
315+
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
316+
scrollOffset: '0px'}) });
121317
</pre>
122318

123-
ScrollTimeline with scroll range and interval {#scroll-timeline-with-scroll-range-and-interval-use-case}
124-
-----------------------------------
125-
This use case is similar to ScrollTimeline with scroll range.
126-
The difference is behavior of out of range.
127-
Once scroll position is out of range, the animation will continue until animation is finish.
128-
But some animation have infinity duration, so we use the interval property of ScrollTrigger in such case.
319+
## Combination scroll and time-base animations ## {#combination-scroll-and-time-base-animations-usecase}
129320

130-
This use case is as follow:
321+
### The photo viewer ### {#movie-show-case-usecase}
322+
Maybe the developer will want to use the scroll based timeline and the time-based timeline.
131323

132-
Basically, this use case is same to the ScrollTimeline with scroll range.
133-
However developer will want to continue some animation’s effect.
324+
Here's an example content which showing the photos.
325+
If scroll position is out of specified range, the animation of the slideshow will start. The progress of this slideshow is related to scroll volume. And if scroll position is within the specified range, the animation of the slideshow will continue automatically.
134326

135-
<img src="img/Usecase4.png" width="600"
136-
alt="Usecase4 : ScrollTimeline with scroll range and interval">
327+
<figure>
328+
<img src="img/usecase4.svg" width="600"
329+
alt="Use case 4: Scrollable slide show.">
330+
<figcaption>
331+
Use case 4: Scrollable slide show.<br>
332+
The left figure is before scroll, the slide show will start as scroll-linked animation.<br>
333+
The right figure is after scroll, the slide show will start as related to the time animation.
334+
</figcaption>
335+
</figure>
137336

138-
If we use this API for this case, the example code will be as follow:
337+
This content can't build the CSS only.
139338
<pre class='lang-javascript'>
140-
var animation = div.getAnimations()[0];
141-
142-
// We will animate this animation 1000ms after exceed range.
143-
animation.timeline = new DocumentTimeline(
144-
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
145-
scrollOffset: '300px',
146-
endScrollOffset: '800px',
147-
interval: '1000ms'}) });
339+
var animation = slideTarget.getAnimation()[0];
340+
var scrollTimeline = new ScrollTimeline(
341+
{ trigger: new ScrollTrigger({ scrollSource: scrollableElement,
342+
orientation: "vertical",
343+
scrollOffset: '0px',
344+
endScrollOffset: '200px'})});
345+
animation.timeline = scrollTimeline;
346+
347+
// We use scroll event in order to change the timeline.
348+
scrollableElement.addEventListener("scroll", function(evt) {
349+
if ((scrollableElement.scrollTop > 200) && animation.timeline != document.timeline) {
350+
animation.timeline = document.timeline;
351+
} else if ((scrollableElement.scrollTop < 200) && animation.timeline == document.timeline) {
352+
animation.timeline = scrollTimeline;
353+
}
354+
});
148355
</pre>
149356

357+
</div>
358+
150359
# Triggering animations # {#triggering-animations}
151360

152361
## The {{AnimationTimelineTrigger}} interface ## {#animationtimelinetrigger-interface}

‎img/Usecase1.png‎

-67.5 KB
Binary file not shown.

‎img/Usecase2.png‎

-37.2 KB
Binary file not shown.

‎img/Usecase3.png‎

-53 KB
Binary file not shown.

‎img/Usecase4.png‎

-53.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)