Index: pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel-exercise-1.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel-exercise-1.html b/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel-exercise-1.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2431c8c6be768c1024d96c14a1586120bca3d973 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel-exercise-1.html |
@@ -0,0 +1,58 @@ |
+<!-- |
+Copyright 2013 Google Inc. All Rights Reserved. |
+ |
+Licensed under the Apache License, Version 2.0 (the "License"); |
+you may not use this file except in compliance with the License. |
+You may obtain a copy of the License at |
+ |
+ http://www.apache.org/licenses/LICENSE-2.0 |
+ |
+Unless required by applicable law or agreed to in writing, software |
+distributed under the License is distributed on an "AS IS" BASIS, |
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
+See the License for the specific language governing permissions and |
+limitations under the License. |
+ |
+--> |
+ |
+<!DOCTYPE html> |
+ |
+<html> |
+ |
+<div class="content"> |
+ |
+ <div id="animNum">3</div> |
+ |
+ <div class="heading subTitle">Parallel Animation Group</div> |
+ |
+ <div class="heading exercises">Exercise 1 - Make a Parallel Group</div> |
+ |
+ <p class="description">Groupings are important so let's |
+ get started on the exercise</p> |
+ |
+ <p class="description">In this exercise, create a parallel group |
+ of animation that has 3 different animations. Each children should run 300px, |
+ 500px, 700px from top respectively for 5 seconds.</p> |
+ |
+ <p class="description">Hint: you should first create the children then |
+ include the children into the group. You might also need to create |
+ more animation divs in the html section and change their colour |
+ depends on your preferences.</p> |
+ |
+ <div id="hideLabel" onclick="toggleSolution()">Show Solution</div> |
+ <div id="toggleText" class="codeSamples"> |
+ <code>var A = new Animation(document.querySelector("#a"), |
+ {top: "300px"}, 5); <br /> |
+ var B = new Animation(document.querySelector("#b"), |
+ {top: "500px"}, 5); <br /> |
+ var C = new Animation(document.querySelector("#c"), |
+ {top: "700px"}, 5); <br /> |
+ new ParGroup([A, B, C]); |
+ </code> |
+ </div> |
+ |
+ <div id="tryIt"></div> |
+ |
+ <div class="separator"></div> |
+ |
+</div> <!-- content ending div --> |