User:Mantaroh/Scroll-driven animations: Difference between revisions

User:Mantaroh/Scroll-driven animations (view source)

Revision as of 02:54, 30 June 2016

1,287 bytes removed , 30 June 2016

Update CSS Features.

Mantaroh

28

edits

@@ Line 26: / Line 26: @@
 And update the range of ScrollTimeline based on the first matching conditions:<br />
 - If ScrollTimeline doesn't have any related animation, maxRange should be 0ms.<br />
-- If ScrollTimeline has related animation, maxRange should be maximum value of target effect end time of animations. <br />
+- If ScrollTimeline has related animation, maxRange should be a maximum value of target effect end time of animations. <br />
-(If target effect end time is infinite, presumably we might use doze duration of animation.)
+(If target effect end time is infinite, presumably we might use dose duration of animation.)
 ==== Examples ====
@@ Line 67: / Line 67: @@
    Then we should use 2000 ms as max scroll range.
-=== Interface of CSS proposal ===
+=== CSS Interface proposal ===
 The CSS interface is same to [https://lists.w3.org/Archives/Public/www-style/2014Sep/0135.html Dean's proposal].
-There are three feature in his poroposal, but 'animation-behavior' is not related with timeline.
+There is three feature in his proposal, but 'animation-behavior' is not related to timeline.
-So in this document, we explain 'animation-timeline'(Original is 'animation-timebase') and 'animation-trigger' interface only.
+So in this document, we explain 'animation-timeline'(Original name is 'animation-timebase') and 'animation-trigger' interface only.
-animation-trigger:
+Common features:
-  - The scroll container should notify the scroll value to the ScrollTimeline.
+  - The scroll container should notify the changes value of scroll to related ScrollTimeline.
-  - The difference point is that animation target element and scroll container object is same.
+  - The difference point is that animation target element and scroll container object is same or subelement.
+ - If the direction of scroll is reverse(like from bottom to top, from right to left), the timeline time is decreasing.
+ - ScrollTimeline should remain the animation status in order to use fill mode.
-animation-timeline:
+=== Demonstration ===
- - The feature is same to ScrollTimeline.
- - The difference point is that animation target element and scroll container object is same.
-[Memo]
- - 通知するスクロール量の取得元の役割を明記する。
- - スクロールで範囲に入ったときの方向について記述する。
-   例：scrollMax -> scrollMin 方向へスクロールしたとき、アニメーションの playbackRate は負数で遷移する。
- - スクロールの指定が逆( scroll(300px, 100px)とか)になってる時の挙動も書いてた方がいいかも。scroll-snap で定義されていればそっち参照。
-=== Usage of this API ===
-) Duration of animation is finite.
-  var scrollTimeline = new ScrollTimeline(div, "vertical");
-  var animation1 = new Animation(new KeyframeEffect( { marginLeft: ['0px', '200px'] }, 10000), null);
-  var animation2 = new Animation(new KeyframeEffect( { marginLeft: ['100px', '300px'] }, 20000), null);
-  animation1.timeline = scrollTimeline;
-  animation2.timeline = scrollTimeline;
- Demonstration:
    http://output.jsbin.com/wiwode
-) Duration of animation is infinite.
-  var scrollTimeline = new ScrollTimeline(div, "horizontal", "20s");  // scroll range is mapped 0s - 20s.
-  var animation1 = new Animation(new KeyframeEffect( { marginLeft: ['0px', '200px'] }, 10 * 1000), null);
-  var animation2 = new Animation(new KeyframeEffect( { marginLeft: ['100px', '300px'] }, {duration:20 * 1000, iterations:Infinity}), null);
-  animation1.timeline = scrollTimeline;
-  animation2.timeline = scrollTimeline;
 == Design ==