From 2add0ae34ae7a01892a25f0f565a4a23ff0ee1bf Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 24 Apr 2023 11:04:05 +0000 Subject: [PATCH 01/22] Setting up GitHub Classroom Feedback From 40d779a3d65692a28b6fc884f354e6ca70e6a6b4 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 14:47:47 +0200 Subject: [PATCH 02/22] Added file structure and styles --- README.md | 1 - styles/_mixins.scss | 4 ++++ styles/_variables.scss | 1 + styles/style.css | 37 +++++++++++++++++++++++++++++++++++++ styles/style.css.map | 1 + styles/style.scss | 38 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 81 insertions(+), 1 deletion(-) delete mode 100644 README.md create mode 100644 styles/_mixins.scss create mode 100644 styles/_variables.scss create mode 100644 styles/style.css create mode 100644 styles/style.css.map create mode 100644 styles/style.scss diff --git a/README.md b/README.md deleted file mode 100644 index 8e13926..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10967602&assignment_repo_type=AssignmentRepo) diff --git a/styles/_mixins.scss b/styles/_mixins.scss new file mode 100644 index 0000000..060eb48 --- /dev/null +++ b/styles/_mixins.scss @@ -0,0 +1,4 @@ +@mixin center { + margin: 0 auto; + text-align: center; +} \ No newline at end of file diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 0000000..691dbce --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1 @@ +$primaryGreen: rgb(3, 83, 3); \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..de9ad5b --- /dev/null +++ b/styles/style.css @@ -0,0 +1,37 @@ +body { + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 1.5; + color: white; + background-color: rgb(3, 83, 3); + margin: 0; + padding: 0; +} + +* { + padding: 0; + margin: 0; +} + +h1 { + margin: 0 auto; + text-align: center; + font-size: 2.5rem; + font-weight: 700; +} + +h2 { + margin: 0 auto; + text-align: center; + font-size: 2rem; + font-weight: 700; +} + +p { + font-size: 1.2rem; + font-weight: 400; + height: 100vh; + padding: 20px; + margin: 0 auto; + max-width: 1000px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/styles/style.css.map b/styles/style.css.map new file mode 100644 index 0000000..68697a1 --- /dev/null +++ b/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css","_mixins.scss"],"names":[],"mappings":"AAGA;EACI,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,+BAAA;EACA,SAAA;EACA,UAAA;ACFJ;;ADKA;EACI,UAAA;EACA,SAAA;ACFJ;;ADKA;EEjBI,cAAA;EACA,kBAAA;EFkBA,iBAAA;EACA,gBAAA;ACDJ;;ADIA;EEvBI,cAAA;EACA,kBAAA;EFwBA,eAAA;EACA,gBAAA;ACAJ;;ADGA;EACI,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACAJ","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss new file mode 100644 index 0000000..639c54b --- /dev/null +++ b/styles/style.scss @@ -0,0 +1,38 @@ +@import "./variables"; +@import "./mixins"; + +body { + font-family: 'Roboto', sans-serif; + font-size: 16px; + line-height: 1.5; + color: white; + background-color: rgb(3, 83, 3); + margin: 0; + padding: 0; +} + +* { + padding: 0; + margin: 0; +} + +h1 { + @include center; + font-size: 2.5rem; + font-weight: 700; +} + +h2 { + @include center; + font-size: 2rem; + font-weight: 700; +} + +p { + font-size: 1.2rem; + font-weight: 400; + height: 100vh; + padding: 20px; + margin: 0 auto; + max-width: 1000px; +} \ No newline at end of file From 03910e26f9429b1c6d7d06c509d03f2fbb278505 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 14:49:04 +0200 Subject: [PATCH 03/22] Adding readme, index og the script file --- README.md | 17 ++++++++++++ index.html | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 0 3 files changed, 95 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..e0d9703 --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10967602&assignment_repo_type=AssignmentRepo) +What the project does? + + +Why the project is useful? + + +How users can get started with the project? + + +Where users can get help with your project? + + +Which technology is used? + + +Who maintains and contributes to the project? \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9052eaf --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + + UN goal 15 + + + +

UN goal 15 - Life on land

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+ + +
+
+
+

Scene 1

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+
+
+ + +
+
+
+

Scene 2

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+
+
+ + +
+
+
+

Scene 3

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+
+
+ + +
+
+
+

Scene 4

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 From e4ca2b86f5ce947df385572031d3eb696fa2edd2 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 16:13:58 +0200 Subject: [PATCH 04/22] Tried adding a tree, will be used for the forest --- index.html | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 9052eaf..f0fbba9 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,19 @@

UN goal 15 - Life on land

deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores consequuntur.

- +
+
+
+
+
+
+
+
-

Scene 1

+

Every year 10 million hectares of forest are destroyed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos aperiam vitae ut nostrum quis exercitationem ex similique, officia, @@ -37,7 +44,9 @@

Scene 1

-

Scene 2

+

+ Almost 90% of global deforestation is due to agricultural expansion +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos aperiam vitae ut nostrum quis exercitationem ex similique, officia, @@ -51,7 +60,9 @@

Scene 2

-

Scene 3

+

+ Around 40 000 species are documented to be at risk of extinction +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos aperiam vitae ut nostrum quis exercitationem ex similique, officia, @@ -65,7 +76,10 @@

Scene 3

-

Scene 4

+

+ Nearly half of freshwater, terrestrial and mountain key biodiversity + areas are protected +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos aperiam vitae ut nostrum quis exercitationem ex similique, officia, From d0e0ac09cbd58e0acd54f16bba0abab3d8853cf7 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 16:14:25 +0200 Subject: [PATCH 05/22] Tried adding a single tree to the intro section --- styles/_intro-forest.scss | 50 ++++++++++++++++++++++++++ styles/_variables.scss | 3 +- styles/style.css | 75 ++++++++++++++++++++++++++++++++++++++- styles/style.css.map | 2 +- styles/style.scss | 69 +++++++++++++++++++++++------------ 5 files changed, 174 insertions(+), 25 deletions(-) create mode 100644 styles/_intro-forest.scss diff --git a/styles/_intro-forest.scss b/styles/_intro-forest.scss new file mode 100644 index 0000000..8224cf0 --- /dev/null +++ b/styles/_intro-forest.scss @@ -0,0 +1,50 @@ +@import "./variables"; + +.intro-forest { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.scene1__tree { + position: relative; + margin: 0 auto; + border-radius: 50%; +} + +.scene1__tree .tree__leaf { + background-color: #98482b; +} + +.intro-forest .scene1__tree .tree__leaf:nth-of-type(1), +.intro-forest .scene1__tree .tree__leaf:nth-of-type(2), +.intro-forest .scene1__tree .tree__leaf:nth-of-type(3) { + border-radius: 25%; +} + +.scene1__tree .tree__leaf:nth-of-type(1) { + width: 50px; + height: 25px; +} + +.scene1__tree .tree__leaf:nth-of-type(2) { + width: 75px; + height: 50px; + left: -12.5px; +} + +.scene1__tree .tree__leaf:nth-of-type(3) { + width: 80px; + height: 60px; +} + +.tree__trunk { + background-color: black; + width: 10px; + height: 80px; + position: absolute; + top: 135px; + left: 50%; + transform: translateX(-50%); +} diff --git a/styles/_variables.scss b/styles/_variables.scss index 691dbce..4e01f95 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -1 +1,2 @@ -$primaryGreen: rgb(3, 83, 3); \ No newline at end of file +$primaryGreen: rgb(45, 117, 45); +$treeRed: #98482b; \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index de9ad5b..d40ddd1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,9 +1,58 @@ +.intro-forest { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.scene1__tree { + position: relative; + margin: 0 auto; + border-radius: 50%; +} + +.scene1__tree .tree__leaf { + background-color: #98482b; +} + +.intro-forest .scene1__tree .tree__leaf:nth-of-type(1), +.intro-forest .scene1__tree .tree__leaf:nth-of-type(2), +.intro-forest .scene1__tree .tree__leaf:nth-of-type(3) { + border-radius: 25%; +} + +.scene1__tree .tree__leaf:nth-of-type(1) { + width: 50px; + height: 25px; +} + +.scene1__tree .tree__leaf:nth-of-type(2) { + width: 75px; + height: 50px; + left: -12.5px; +} + +.scene1__tree .tree__leaf:nth-of-type(3) { + width: 80px; + height: 60px; +} + +.tree__trunk { + background-color: black; + width: 10px; + height: 80px; + position: absolute; + top: 135px; + left: 50%; + transform: translateX(-50%); +} + body { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.5; color: white; - background-color: rgb(3, 83, 3); + background-color: rgb(45, 117, 45); margin: 0; padding: 0; } @@ -18,6 +67,7 @@ h1 { text-align: center; font-size: 2.5rem; font-weight: 700; + padding: 20px; } h2 { @@ -34,4 +84,27 @@ p { padding: 20px; margin: 0 auto; max-width: 1000px; +} + +.scene { + height: 100vh; + width: 100%; + position: relative; + overflow: hidden; +} + +#scene1 { + background-color: rgb(43, 159, 43); +} + +#scene2 { + background-color: rgb(23, 133, 23); +} + +#scene3 { + background-color: rgb(16, 113, 16); +} + +#scene4 { + background-color: rgb(8, 96, 8); }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/styles/style.css.map b/styles/style.css.map index 68697a1..085debf 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css","_mixins.scss"],"names":[],"mappings":"AAGA;EACI,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,+BAAA;EACA,SAAA;EACA,UAAA;ACFJ;;ADKA;EACI,UAAA;EACA,SAAA;ACFJ;;ADKA;EEjBI,cAAA;EACA,kBAAA;EFkBA,iBAAA;EACA,gBAAA;ACDJ;;ADIA;EEvBI,cAAA;EACA,kBAAA;EFwBA,eAAA;EACA,gBAAA;ACAJ;;ADGA;EACI,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACAJ","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_intro-forest.scss","style.css","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAEA;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACDF;;ADIA;EACE,kBAAA;EACA,cAAA;EACA,kBAAA;ACDF;;ADIA;EACE,yBAAA;ACDF;;ADIA;;;EAGE,kBAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;EACA,aAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;ACDF;;ADIA;EACE,uBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,2BAAA;ACDF;;AC3CA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCTa;EDUb,SAAA;EACA,UAAA;AD8CF;;AC3CA;EACE,UAAA;EACA,SAAA;AD8CF;;AC3CA;EElBI,cAAA;EACA,kBAAA;EFmBF,iBAAA;EACA,gBAAA;EACA,aAAA;AD+CF;;AC5CA;EEzBI,cAAA;EACA,kBAAA;EF0BF,eAAA;EACA,gBAAA;ADgDF;;AC7CA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ADgDF;;AC7CA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,+BAAA;ADgDF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 639c54b..06d546c 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,38 +1,63 @@ @import "./variables"; @import "./mixins"; +@import "./intro-forest"; body { - font-family: 'Roboto', sans-serif; - font-size: 16px; - line-height: 1.5; - color: white; - background-color: rgb(3, 83, 3); - margin: 0; - padding: 0; + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 1.5; + color: white; + background-color: $primaryGreen; + margin: 0; + padding: 0; } * { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } h1 { - @include center; - font-size: 2.5rem; - font-weight: 700; + @include center; + font-size: 2.5rem; + font-weight: 700; + padding: 20px; } h2 { - @include center; - font-size: 2rem; - font-weight: 700; + @include center; + font-size: 2rem; + font-weight: 700; } p { - font-size: 1.2rem; - font-weight: 400; - height: 100vh; - padding: 20px; - margin: 0 auto; - max-width: 1000px; -} \ No newline at end of file + font-size: 1.2rem; + font-weight: 400; + height: 100vh; + padding: 20px; + margin: 0 auto; + max-width: 1000px; +} + +.scene { + height: 100vh; + width: 100%; + position: relative; + overflow: hidden; +} + +#scene1 { + background-color: rgb(43, 159, 43); +} + +#scene2 { + background-color: rgb(23, 133, 23); +} + +#scene3 { + background-color: rgb(16, 113, 16); +} + +#scene4 { + background-color: rgb(8, 96, 8); +} From c45fdc39362f4c8e5485c1778459c70a7aa0bc7d Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 16:43:13 +0200 Subject: [PATCH 06/22] Working on svg trees to create forest effect --- images/tree.svg | 6297 +++++++++++++++++++++++++++++++++++++ index.html | 29 +- styles/_intro-forest.scss | 50 - styles/style.css | 59 +- styles/style.css.map | 2 +- styles/style.scss | 11 +- 6 files changed, 6330 insertions(+), 118 deletions(-) create mode 100644 images/tree.svg delete mode 100644 styles/_intro-forest.scss diff --git a/images/tree.svg b/images/tree.svg new file mode 100644 index 0000000..4936305 --- /dev/null +++ b/images/tree.svg @@ -0,0 +1,6297 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index f0fbba9..6d42173 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,22 @@ /> -

UN goal 15 - Life on land

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos - aperiam vitae ut nostrum quis exercitationem ex similique, officia, - deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores - consequuntur. -

-
-
-
-
-
-
+
+

UN goal 15 - Life on land

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos + aperiam vitae ut nostrum quis exercitationem ex similique, officia, + deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores + consequuntur. +

+
+ A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree
diff --git a/styles/_intro-forest.scss b/styles/_intro-forest.scss deleted file mode 100644 index 8224cf0..0000000 --- a/styles/_intro-forest.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import "./variables"; - -.intro-forest { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.scene1__tree { - position: relative; - margin: 0 auto; - border-radius: 50%; -} - -.scene1__tree .tree__leaf { - background-color: #98482b; -} - -.intro-forest .scene1__tree .tree__leaf:nth-of-type(1), -.intro-forest .scene1__tree .tree__leaf:nth-of-type(2), -.intro-forest .scene1__tree .tree__leaf:nth-of-type(3) { - border-radius: 25%; -} - -.scene1__tree .tree__leaf:nth-of-type(1) { - width: 50px; - height: 25px; -} - -.scene1__tree .tree__leaf:nth-of-type(2) { - width: 75px; - height: 50px; - left: -12.5px; -} - -.scene1__tree .tree__leaf:nth-of-type(3) { - width: 80px; - height: 60px; -} - -.tree__trunk { - background-color: black; - width: 10px; - height: 80px; - position: absolute; - top: 135px; - left: 50%; - transform: translateX(-50%); -} diff --git a/styles/style.css b/styles/style.css index d40ddd1..b8fae4a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,52 +1,3 @@ -.intro-forest { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.scene1__tree { - position: relative; - margin: 0 auto; - border-radius: 50%; -} - -.scene1__tree .tree__leaf { - background-color: #98482b; -} - -.intro-forest .scene1__tree .tree__leaf:nth-of-type(1), -.intro-forest .scene1__tree .tree__leaf:nth-of-type(2), -.intro-forest .scene1__tree .tree__leaf:nth-of-type(3) { - border-radius: 25%; -} - -.scene1__tree .tree__leaf:nth-of-type(1) { - width: 50px; - height: 25px; -} - -.scene1__tree .tree__leaf:nth-of-type(2) { - width: 75px; - height: 50px; - left: -12.5px; -} - -.scene1__tree .tree__leaf:nth-of-type(3) { - width: 80px; - height: 60px; -} - -.tree__trunk { - background-color: black; - width: 10px; - height: 80px; - position: absolute; - top: 135px; - left: 50%; - transform: translateX(-50%); -} - body { font-family: "Roboto", sans-serif; font-size: 16px; @@ -80,7 +31,6 @@ h2 { p { font-size: 1.2rem; font-weight: 400; - height: 100vh; padding: 20px; margin: 0 auto; max-width: 1000px; @@ -90,7 +40,14 @@ p { height: 100vh; width: 100%; position: relative; - overflow: hidden; +} + +.intro-forest { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 150px; + height: 150px; } #scene1 { diff --git a/styles/style.css.map b/styles/style.css.map index 085debf..acad24b 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_intro-forest.scss","style.css","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAEA;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACDF;;ADIA;EACE,kBAAA;EACA,cAAA;EACA,kBAAA;ACDF;;ADIA;EACE,yBAAA;ACDF;;ADIA;;;EAGE,kBAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;EACA,aAAA;ACDF;;ADIA;EACE,WAAA;EACA,YAAA;ACDF;;ADIA;EACE,uBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,SAAA;EACA,2BAAA;ACDF;;AC3CA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCTa;EDUb,SAAA;EACA,UAAA;AD8CF;;AC3CA;EACE,UAAA;EACA,SAAA;AD8CF;;AC3CA;EElBI,cAAA;EACA,kBAAA;EFmBF,iBAAA;EACA,gBAAA;EACA,aAAA;AD+CF;;AC5CA;EEzBI,cAAA;EACA,kBAAA;EF0BF,eAAA;EACA,gBAAA;ADgDF;;AC7CA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ADgDF;;AC7CA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,kCAAA;ADgDF;;AC7CA;EACE,+BAAA;ADgDF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","_variables.scss","style.css","_mixins.scss"],"names":[],"mappings":"AAGA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCRa;EDSb,SAAA;EACA,UAAA;AEFF;;AFKA;EACE,UAAA;EACA,SAAA;AEFF;;AFKA;EGjBI,cAAA;EACA,kBAAA;EHkBF,iBAAA;EACA,gBAAA;EACA,aAAA;AEDF;;AFIA;EGxBI,cAAA;EACA,kBAAA;EHyBF,eAAA;EACA,gBAAA;AEAF;;AFGA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AEAF;;AFGA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AEAF;;AFGA;EACE,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,YAAA;EACA,aAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,+BAAA;AEAF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 06d546c..2f1c4fe 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,6 +1,5 @@ @import "./variables"; @import "./mixins"; -@import "./intro-forest"; body { font-family: "Roboto", sans-serif; @@ -33,7 +32,6 @@ h2 { p { font-size: 1.2rem; font-weight: 400; - height: 100vh; padding: 20px; margin: 0 auto; max-width: 1000px; @@ -43,7 +41,14 @@ p { height: 100vh; width: 100%; position: relative; - overflow: hidden; +} + +.intro-forest { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 150px; + height: 150px; } #scene1 { From 925dd4d5d530f43930293fb9a992015728582e11 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 17:32:49 +0200 Subject: [PATCH 07/22] Expermenting with creating a forest using svgs --- styles/_forest.scss | 61 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 styles/_forest.scss diff --git a/styles/_forest.scss b/styles/_forest.scss new file mode 100644 index 0000000..3db26ff --- /dev/null +++ b/styles/_forest.scss @@ -0,0 +1,61 @@ +.tree { + width: 200px; + height: 200px; + margin: 0; + padding: 0; + border: 0; +} + +.tree:nth-of-type(1) { + right: -100px; +} + +.tree:nth-of-type(2) { + position: relative; + right: -50px; +} + +.tree:nth-of-type(3) { + right: 0px; +} + +.tree:nth-of-type(4) { + right: 50px; +} + +.tree:nth-of-type(5) { + right: 100px; +} + +.tree:nth-of-type(6) { + right: 150px; +} + +.tree:nth-of-type(7) { + right: -100px; +} + +.tree:nth-of-type(8) { + right: -50px; +} + +.tree:nth-of-type(9) { + right: 0px; +} + +.tree:nth-of-type(10) { + right: 50px; +} + +.tree:nth-of-type(11) { + right: 100px; +} + +.tree:nth-of-type(12) { + right: 150px; +} + +.tree:hover { + animation: shake 0.5s; + transition: 0.5s; +} From c98a65ece5c13b0cc4148327b58f156fcf15a4eb Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 17:33:18 +0200 Subject: [PATCH 08/22] Adding animations and a forest to the website --- index.html | 19 +++++---- styles/_animations.scss | 20 ++++++++++ styles/style.css | 87 +++++++++++++++++++++++++++++++++++++++-- styles/style.css.map | 2 +- styles/style.scss | 8 ++-- 5 files changed, 122 insertions(+), 14 deletions(-) create mode 100644 styles/_animations.scss diff --git a/index.html b/index.html index 6d42173..d2a2eab 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,18 @@

UN goal 15 - Life on land

consequuntur.

- A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree
diff --git a/styles/_animations.scss b/styles/_animations.scss new file mode 100644 index 0000000..4c2f45a --- /dev/null +++ b/styles/_animations.scss @@ -0,0 +1,20 @@ +@keyframes shake { + 0% { + transform: rotate(0deg); + } + 20% { + transform: rotate(10deg); + } + 40% { + transform: rotate(-10deg); + } + 60% { + transform: rotate(5deg); + } + 80% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } + } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index b8fae4a..d71691e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,85 @@ +@keyframes shake { + 0% { + transform: rotate(0deg); + } + 20% { + transform: rotate(10deg); + } + 40% { + transform: rotate(-10deg); + } + 60% { + transform: rotate(5deg); + } + 80% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } +} +.tree { + width: 200px; + height: 200px; + margin: 0; + padding: 0; + border: 0; +} + +.tree:nth-of-type(1) { + right: -100px; +} + +.tree:nth-of-type(2) { + position: relative; + right: -50px; +} + +.tree:nth-of-type(3) { + right: 0px; +} + +.tree:nth-of-type(4) { + right: 50px; +} + +.tree:nth-of-type(5) { + right: 100px; +} + +.tree:nth-of-type(6) { + right: 150px; +} + +.tree:nth-of-type(7) { + right: -100px; +} + +.tree:nth-of-type(8) { + right: -50px; +} + +.tree:nth-of-type(9) { + right: 0px; +} + +.tree:nth-of-type(10) { + right: 50px; +} + +.tree:nth-of-type(11) { + right: 100px; +} + +.tree:nth-of-type(12) { + right: 150px; +} + +.tree:hover { + animation: shake 0.5s; + transition: 0.5s; +} + body { font-family: "Roboto", sans-serif; font-size: 16px; @@ -45,9 +127,8 @@ p { .intro-forest { display: flex; flex-direction: row; - justify-content: space-evenly; - width: 150px; - height: 150px; + flex-wrap: wrap; + justify-content: flex-start; } #scene1 { diff --git a/styles/style.css.map b/styles/style.css.map index acad24b..0986622 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","_variables.scss","style.css","_mixins.scss"],"names":[],"mappings":"AAGA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCRa;EDSb,SAAA;EACA,UAAA;AEFF;;AFKA;EACE,UAAA;EACA,SAAA;AEFF;;AFKA;EGjBI,cAAA;EACA,kBAAA;EHkBF,iBAAA;EACA,gBAAA;EACA,aAAA;AEDF;;AFIA;EGxBI,cAAA;EACA,kBAAA;EHyBF,eAAA;EACA,gBAAA;AEAF;;AFGA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AEAF;;AFGA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AEAF;;AFGA;EACE,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,YAAA;EACA,aAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,kCAAA;AEAF;;AFGA;EACE,+BAAA;AEAF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;ADqBF;;AClBA;EACE,aAAA;ADqBF;;AClBA;EACE,kBAAA;EACA,YAAA;ADqBF;;AClBA;EACE,UAAA;ADqBF;;AClBA;EACE,WAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,aAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,UAAA;ADqBF;;AClBA;EACE,WAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AE3EA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF8EF;;AE3EA;EACE,UAAA;EACA,SAAA;AF8EF;;AE3EA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF+EF;;AE5EA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AFgFF;;AE7EA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AFgFF;;AE7EA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AFgFF;;AE7EA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;AFgFF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,+BAAA;AF+EF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 2f1c4fe..99030e2 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,5 +1,7 @@ @import "./variables"; @import "./mixins"; +@import "./animations"; +@import "./forest"; body { font-family: "Roboto", sans-serif; @@ -46,9 +48,9 @@ p { .intro-forest { display: flex; flex-direction: row; - justify-content: space-evenly; - width: 150px; - height: 150px; + flex-wrap: wrap; + justify-content: flex-start; + } #scene1 { From 72d0b95c1e60dd7d95d6a60790e926d71c57cf14 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 18:39:46 +0200 Subject: [PATCH 09/22] Added a quick intro to the website --- index.html | 70 +++++++++++++++++++++++++++++++------------- styles/_forest.scss | 52 -------------------------------- styles/style.css | 55 ++-------------------------------- styles/style.css.map | 2 +- styles/style.scss | 4 ++- 5 files changed, 57 insertions(+), 126 deletions(-) diff --git a/index.html b/index.html index d2a2eab..21f784c 100644 --- a/index.html +++ b/index.html @@ -5,33 +5,63 @@ UN goal 15 - + +

UN goal 15 - Life on land

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos - aperiam vitae ut nostrum quis exercitationem ex similique, officia, - deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores - consequuntur. + UN Goal 15 aims to protect, restore and promote the sustainable use of + terrestrial ecosystems, forests, and biodiversity. With the world's + population projected to reach nearly 10 billion by 2050, it is crucial + to ensure that we manage our planet's natural resources in a way that + maintains their productivity, sustains life, and supports economic and + social development. +

+

+ This goal recognizes that the Earth's ecosystems are under significant + pressure from human activities such as deforestation, climate change, + and overexploitation of resources. If left unchecked, these activities + could lead to irreversible damage to our planet's natural systems and + threaten the survival of countless species. +

+

+ By implementing sustainable practices and protecting our natural + resources, we can achieve Goal 15 and ensure that life on land is + protected for future generations. This includes promoting responsible + use of forests, halting land degradation and desertification, and + conserving and restoring biodiversity. Achieving Goal 15 is not only + important for preserving the beauty and diversity of our planet's + ecosystems, but also for supporting sustainable development and + mitigating the effects of climate change.

- A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree - A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree + A picture of a autumn tree
diff --git a/styles/_forest.scss b/styles/_forest.scss index 3db26ff..fc91173 100644 --- a/styles/_forest.scss +++ b/styles/_forest.scss @@ -1,58 +1,6 @@ .tree { width: 200px; height: 200px; - margin: 0; - padding: 0; - border: 0; -} - -.tree:nth-of-type(1) { - right: -100px; -} - -.tree:nth-of-type(2) { - position: relative; - right: -50px; -} - -.tree:nth-of-type(3) { - right: 0px; -} - -.tree:nth-of-type(4) { - right: 50px; -} - -.tree:nth-of-type(5) { - right: 100px; -} - -.tree:nth-of-type(6) { - right: 150px; -} - -.tree:nth-of-type(7) { - right: -100px; -} - -.tree:nth-of-type(8) { - right: -50px; -} - -.tree:nth-of-type(9) { - right: 0px; -} - -.tree:nth-of-type(10) { - right: 50px; -} - -.tree:nth-of-type(11) { - right: 100px; -} - -.tree:nth-of-type(12) { - right: 150px; } .tree:hover { diff --git a/styles/style.css b/styles/style.css index d71691e..937396f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -21,58 +21,6 @@ .tree { width: 200px; height: 200px; - margin: 0; - padding: 0; - border: 0; -} - -.tree:nth-of-type(1) { - right: -100px; -} - -.tree:nth-of-type(2) { - position: relative; - right: -50px; -} - -.tree:nth-of-type(3) { - right: 0px; -} - -.tree:nth-of-type(4) { - right: 50px; -} - -.tree:nth-of-type(5) { - right: 100px; -} - -.tree:nth-of-type(6) { - right: 150px; -} - -.tree:nth-of-type(7) { - right: -100px; -} - -.tree:nth-of-type(8) { - right: -50px; -} - -.tree:nth-of-type(9) { - right: 0px; -} - -.tree:nth-of-type(10) { - right: 50px; -} - -.tree:nth-of-type(11) { - right: 100px; -} - -.tree:nth-of-type(12) { - right: 150px; } .tree:hover { @@ -129,6 +77,9 @@ p { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; + margin: 0 auto; + max-width: 1000px; + bottom: 100px; } #scene1 { diff --git a/styles/style.css.map b/styles/style.css.map index 0986622..4398516 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;ADqBF;;AClBA;EACE,aAAA;ADqBF;;AClBA;EACE,kBAAA;EACA,YAAA;ADqBF;;AClBA;EACE,UAAA;ADqBF;;AClBA;EACE,WAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,aAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,UAAA;ADqBF;;AClBA;EACE,WAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,YAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AE3EA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF8EF;;AE3EA;EACE,UAAA;EACA,SAAA;AF8EF;;AE3EA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF+EF;;AE5EA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AFgFF;;AE7EA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AFgFF;;AE7EA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AFgFF;;AE7EA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;AFgFF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,kCAAA;AF+EF;;AE5EA;EACE,+BAAA;AF+EF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AEvBA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF0BF;;AEvBA;EACE,UAAA;EACA,SAAA;AF0BF;;AEvBA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF2BF;;AExBA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AF4BF;;AEzBA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,+BAAA;AF4BF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 99030e2..19fd3a5 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -50,7 +50,9 @@ p { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; - + margin: 0 auto; + max-width: 1000px; + bottom: 100px; } #scene1 { From 06d0cb9dfd93e94b17bd0bd0c18bd5c833e0bd15 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 24 Apr 2023 18:40:41 +0200 Subject: [PATCH 10/22] Fixing some bugs in the style folder --- styles/style.css | 1 - styles/style.css.map | 2 +- styles/style.scss | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/styles/style.css b/styles/style.css index 937396f..45fc5d6 100644 --- a/styles/style.css +++ b/styles/style.css @@ -79,7 +79,6 @@ p { justify-content: flex-start; margin: 0 auto; max-width: 1000px; - bottom: 100px; } #scene1 { diff --git a/styles/style.css.map b/styles/style.css.map index 4398516..f2828bf 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AEvBA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF0BF;;AEvBA;EACE,UAAA;EACA,SAAA;AF0BF;;AEvBA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF2BF;;AExBA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AF4BF;;AEzBA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,+BAAA;AF4BF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AEvBA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF0BF;;AEvBA;EACE,UAAA;EACA,SAAA;AF0BF;;AEvBA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF2BF;;AExBA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AF4BF;;AEzBA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,+BAAA;AF4BF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 19fd3a5..83dda60 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -52,7 +52,6 @@ p { justify-content: flex-start; margin: 0 auto; max-width: 1000px; - bottom: 100px; } #scene1 { From c2b9b9d7215d6813eeb3afae76ca0a1b207adcd4 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 25 Apr 2023 17:07:29 +0200 Subject: [PATCH 11/22] Tried working on the intersectionObserver --- images/bulldozer.svg | 168 ++++++++++++++++++++++++++++++++++++++++ index.html | 16 ++++ script.js | 29 +++++++ styles/_animations.scss | 50 +++++++----- styles/_scene1.scss | 20 +++++ styles/style.css | 31 ++++++++ styles/style.css.map | 2 +- styles/style.scss | 1 + 8 files changed, 297 insertions(+), 20 deletions(-) create mode 100644 images/bulldozer.svg create mode 100644 styles/_scene1.scss diff --git a/images/bulldozer.svg b/images/bulldozer.svg new file mode 100644 index 0000000..3eeedbf --- /dev/null +++ b/images/bulldozer.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 21f784c..9df087e 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,22 @@

Every year 10 million hectares of forest are destroyed

consequuntur.

+
+ A svg of a tree + A svg of a tree +
+
+ Bulldozer + Bulldozer +
diff --git a/script.js b/script.js index e69de29..b94da08 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,29 @@ +const treeContainer = document.querySelector(".tree-container"); +const trees = document.querySelectorAll(".tree"); +const bulldozers = document.querySelectorAll(".bulldozer"); + +const observer = new IntersectionObserver( + (entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + // Tree is in view, start the animation + bulldozers.forEach((bulldozer) => { + bulldozer.classList.add("animate"); + console.log(observer) + }); + } else { + // Tree is out of view, stop the animation + bulldozers.forEach((bulldozer) => { + bulldozer.classList.remove("animate"); + }); + } + }); + }, + { threshold: 0.5 } +); + +// Observe each tree +trees.forEach((tree) => { + observer.observe(tree); +}); + diff --git a/styles/_animations.scss b/styles/_animations.scss index 4c2f45a..b8dc439 100644 --- a/styles/_animations.scss +++ b/styles/_animations.scss @@ -1,20 +1,32 @@ @keyframes shake { - 0% { - transform: rotate(0deg); - } - 20% { - transform: rotate(10deg); - } - 40% { - transform: rotate(-10deg); - } - 60% { - transform: rotate(5deg); - } - 80% { - transform: rotate(-5deg); - } - 100% { - transform: rotate(0deg); - } - } \ No newline at end of file + 0% { + transform: rotate(0deg); + } + 20% { + transform: rotate(10deg); + } + 40% { + transform: rotate(-10deg); + } + 60% { + transform: rotate(5deg); + } + 80% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes animate { + 0% { + transform: translateX(0); + } + 50% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0); + } +} diff --git a/styles/_scene1.scss b/styles/_scene1.scss new file mode 100644 index 0000000..987351b --- /dev/null +++ b/styles/_scene1.scss @@ -0,0 +1,20 @@ +.bulldozer { + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; +} + +.bulldozer-left { + transform: translateX(-100%); +} + +.bulldozer-right { + transform: translateX(100%); +} + +.animate { + animation: animate 10s infinite reverse; +} + diff --git a/styles/style.css b/styles/style.css index 45fc5d6..89769cb 100644 --- a/styles/style.css +++ b/styles/style.css @@ -18,6 +18,17 @@ transform: rotate(0deg); } } +@keyframes animate { + 0% { + transform: translateX(0); + } + 50% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0); + } +} .tree { width: 200px; height: 200px; @@ -28,6 +39,26 @@ transition: 0.5s; } +.bulldozer { + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; +} + +.bulldozer-left { + transform: translateX(-100%); +} + +.bulldozer-right { + transform: translateX(100%); +} + +.animate { + animation: animate 10s infinite reverse; +} + body { font-family: "Roboto", sans-serif; font-size: 16px; diff --git a/styles/style.css.map b/styles/style.css.map index f2828bf..0402c6f 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_animations.scss","style.css","_forest.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACI;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,yBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;EDCE;IACE,wBAAA;ECCJ;EDCE;IACE,uBAAA;ECCJ;AACF;ACnBA;EACE,YAAA;EACA,aAAA;ADqBF;;AClBA;EACE,qBAAA;EACA,gBAAA;ADqBF;;AEvBA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCVa;EDWb,SAAA;EACA,UAAA;AF0BF;;AEvBA;EACE,UAAA;EACA,SAAA;AF0BF;;AEvBA;EEnBI,cAAA;EACA,kBAAA;EFoBF,iBAAA;EACA,gBAAA;EACA,aAAA;AF2BF;;AExBA;EE1BI,cAAA;EACA,kBAAA;EF2BF,eAAA;EACA,gBAAA;AF4BF;;AEzBA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AF4BF;;AEzBA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,kCAAA;AF4BF;;AEzBA;EACE,+BAAA;AF4BF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["_animations.scss","style.css","_forest.scss","_scene1.scss","style.scss","_variables.scss","_mixins.scss"],"names":[],"mappings":"AAAA;EACE;IACE,uBAAA;ECCF;EDCA;IACE,wBAAA;ECCF;EDCA;IACE,yBAAA;ECCF;EDCA;IACE,uBAAA;ECCF;EDCA;IACE,wBAAA;ECCF;EDCA;IACE,uBAAA;ECCF;AACF;ADEA;EACE;IACE,wBAAA;ECAF;EDEA;IACE,4BAAA;ECAF;EDEA;IACE,wBAAA;ECAF;AACF;AC9BA;EACE,YAAA;EACA,aAAA;ADgCF;;AC7BA;EACE,qBAAA;EACA,gBAAA;ADgCF;;AEvCA;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,aAAA;AF0CJ;;AEvCA;EACI,4BAAA;AF0CJ;;AEvCA;EACI,2BAAA;AF0CJ;;AEvCA;EACI,uCAAA;AF0CJ;;AGrDA;EACE,iCAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kCCXa;EDYb,SAAA;EACA,UAAA;AHwDF;;AGrDA;EACE,UAAA;EACA,SAAA;AHwDF;;AGrDA;EEpBI,cAAA;EACA,kBAAA;EFqBF,iBAAA;EACA,gBAAA;EACA,aAAA;AHyDF;;AGtDA;EE3BI,cAAA;EACA,kBAAA;EF4BF,eAAA;EACA,gBAAA;AH0DF;;AGvDA;EACE,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AH0DF;;AGvDA;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AH0DF;;AGvDA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;AH0DF;;AGvDA;EACE,kCAAA;AH0DF;;AGvDA;EACE,kCAAA;AH0DF;;AGvDA;EACE,kCAAA;AH0DF;;AGvDA;EACE,+BAAA;AH0DF","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index 83dda60..8241734 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -2,6 +2,7 @@ @import "./mixins"; @import "./animations"; @import "./forest"; +@import "./scene1"; body { font-family: "Roboto", sans-serif; From 2f45ef43cecfd9a97151515b386b199904e88591 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 26 Apr 2023 13:22:42 +0200 Subject: [PATCH 12/22] Tried working with GSAP library --- __MACOSX/gsap-public/._.DS_Store | Bin 0 -> 120 bytes __MACOSX/gsap-public/._docs-link.html | Bin 0 -> 176 bytes .../gsap-public/._getting-started-link.html | Bin 0 -> 176 bytes __MACOSX/gsap-public/esm/._.DS_Store | Bin 0 -> 120 bytes __MACOSX/gsap-public/minified/._.DS_Store | Bin 0 -> 120 bytes __MACOSX/gsap-public/src/._.DS_Store | Bin 0 -> 120 bytes __MACOSX/gsap-public/umd/._.DS_Store | Bin 0 -> 120 bytes gsap-public/.DS_Store | Bin 0 -> 10244 bytes gsap-public/docs-link.html | 13 + gsap-public/esm/.DS_Store | Bin 0 -> 6148 bytes gsap-public/esm/CSSPlugin.js | 1552 ++ gsap-public/esm/CSSRulePlugin.js | 134 + gsap-public/esm/CustomEase.js | 371 + gsap-public/esm/Draggable.js | 2693 +++ gsap-public/esm/EasePack.js | 212 + gsap-public/esm/EaselPlugin.js | 341 + gsap-public/esm/Flip.js | 1512 ++ gsap-public/esm/MotionPathPlugin.js | 368 + gsap-public/esm/Observer.js | 685 + gsap-public/esm/PixiPlugin.js | 453 + gsap-public/esm/ScrollToPlugin.js | 269 + gsap-public/esm/ScrollTrigger.js | 2524 +++ gsap-public/esm/TextPlugin.js | 166 + gsap-public/esm/all.js | 31 + gsap-public/esm/gsap-core.js | 4453 +++++ gsap-public/esm/index.js | 6 + gsap-public/esm/utils/matrix.js | 420 + gsap-public/esm/utils/paths.js | 1487 ++ gsap-public/esm/utils/strings.js | 107 + gsap-public/getting-started-link.html | 14 + gsap-public/minified/.DS_Store | Bin 0 -> 6148 bytes gsap-public/minified/CSSRulePlugin.min.js | 11 + gsap-public/minified/CSSRulePlugin.min.js.map | 1 + gsap-public/minified/CustomEase.min.js | 11 + gsap-public/minified/CustomEase.min.js.map | 1 + gsap-public/minified/Draggable.min.js | 11 + gsap-public/minified/Draggable.min.js.map | 1 + gsap-public/minified/EasePack.min.js | 11 + gsap-public/minified/EasePack.min.js.map | 1 + gsap-public/minified/EaselPlugin.min.js | 11 + gsap-public/minified/EaselPlugin.min.js.map | 1 + gsap-public/minified/Flip.min.js | 11 + gsap-public/minified/Flip.min.js.map | 1 + gsap-public/minified/MotionPathPlugin.min.js | 11 + .../minified/MotionPathPlugin.min.js.map | 1 + gsap-public/minified/Observer.min.js | 11 + gsap-public/minified/Observer.min.js.map | 1 + gsap-public/minified/PixiPlugin.min.js | 11 + gsap-public/minified/PixiPlugin.min.js.map | 1 + gsap-public/minified/ScrollToPlugin.min.js | 11 + .../minified/ScrollToPlugin.min.js.map | 1 + gsap-public/minified/ScrollTrigger.min.js | 11 + gsap-public/minified/ScrollTrigger.min.js.map | 1 + gsap-public/minified/TextPlugin.min.js | 11 + gsap-public/minified/TextPlugin.min.js.map | 1 + gsap-public/minified/gsap.min.js | 11 + gsap-public/minified/gsap.min.js.map | 1 + gsap-public/src/.DS_Store | Bin 0 -> 6148 bytes gsap-public/src/CSSPlugin.js | 1141 ++ gsap-public/src/CSSRulePlugin.js | 107 + gsap-public/src/CustomEase.js | 275 + gsap-public/src/Draggable.js | 1937 ++ gsap-public/src/EasePack.js | 163 + gsap-public/src/EaselPlugin.js | 282 + gsap-public/src/Flip.js | 1030 + gsap-public/src/MotionPathPlugin.js | 270 + gsap-public/src/Observer.js | 422 + gsap-public/src/PixiPlugin.js | 331 + gsap-public/src/ScrollToPlugin.js | 188 + gsap-public/src/ScrollTrigger.js | 1679 ++ gsap-public/src/TextPlugin.js | 121 + gsap-public/src/all.js | 34 + gsap-public/src/gsap-core.js | 3231 +++ gsap-public/src/index.js | 33 + gsap-public/src/utils/matrix.js | 322 + gsap-public/src/utils/paths.js | 1222 ++ gsap-public/src/utils/strings.js | 91 + gsap-public/umd/.DS_Store | Bin 0 -> 6148 bytes gsap-public/umd/CSSRulePlugin.js | 140 + gsap-public/umd/CustomEase.js | 714 + gsap-public/umd/Draggable.js | 2960 +++ gsap-public/umd/EasePack.js | 217 + gsap-public/umd/EaselPlugin.js | 351 + gsap-public/umd/Flip.js | 1817 ++ gsap-public/umd/MotionPathPlugin.js | 1807 ++ gsap-public/umd/Observer.js | 694 + gsap-public/umd/PixiPlugin.js | 457 + gsap-public/umd/ScrollToPlugin.js | 273 + gsap-public/umd/ScrollTrigger.js | 3073 +++ gsap-public/umd/TextPlugin.js | 254 + gsap-public/umd/all.js | 16455 ++++++++++++++++ gsap-public/umd/gsap.js | 5571 ++++++ index.html | 1 + script.js | 17 +- styles/_animations.scss | 11 - styles/_scene1.scss | 24 +- styles/style.css | 34 +- styles/style.css.map | 2 +- 98 files changed, 65655 insertions(+), 63 deletions(-) create mode 100644 __MACOSX/gsap-public/._.DS_Store create mode 100644 __MACOSX/gsap-public/._docs-link.html create mode 100644 __MACOSX/gsap-public/._getting-started-link.html create mode 100644 __MACOSX/gsap-public/esm/._.DS_Store create mode 100644 __MACOSX/gsap-public/minified/._.DS_Store create mode 100644 __MACOSX/gsap-public/src/._.DS_Store create mode 100644 __MACOSX/gsap-public/umd/._.DS_Store create mode 100644 gsap-public/.DS_Store create mode 100644 gsap-public/docs-link.html create mode 100644 gsap-public/esm/.DS_Store create mode 100644 gsap-public/esm/CSSPlugin.js create mode 100644 gsap-public/esm/CSSRulePlugin.js create mode 100644 gsap-public/esm/CustomEase.js create mode 100644 gsap-public/esm/Draggable.js create mode 100644 gsap-public/esm/EasePack.js create mode 100644 gsap-public/esm/EaselPlugin.js create mode 100644 gsap-public/esm/Flip.js create mode 100644 gsap-public/esm/MotionPathPlugin.js create mode 100644 gsap-public/esm/Observer.js create mode 100644 gsap-public/esm/PixiPlugin.js create mode 100644 gsap-public/esm/ScrollToPlugin.js create mode 100644 gsap-public/esm/ScrollTrigger.js create mode 100644 gsap-public/esm/TextPlugin.js create mode 100644 gsap-public/esm/all.js create mode 100644 gsap-public/esm/gsap-core.js create mode 100644 gsap-public/esm/index.js create mode 100644 gsap-public/esm/utils/matrix.js create mode 100644 gsap-public/esm/utils/paths.js create mode 100644 gsap-public/esm/utils/strings.js create mode 100644 gsap-public/getting-started-link.html create mode 100644 gsap-public/minified/.DS_Store create mode 100644 gsap-public/minified/CSSRulePlugin.min.js create mode 100644 gsap-public/minified/CSSRulePlugin.min.js.map create mode 100644 gsap-public/minified/CustomEase.min.js create mode 100644 gsap-public/minified/CustomEase.min.js.map create mode 100644 gsap-public/minified/Draggable.min.js create mode 100644 gsap-public/minified/Draggable.min.js.map create mode 100644 gsap-public/minified/EasePack.min.js create mode 100644 gsap-public/minified/EasePack.min.js.map create mode 100644 gsap-public/minified/EaselPlugin.min.js create mode 100644 gsap-public/minified/EaselPlugin.min.js.map create mode 100644 gsap-public/minified/Flip.min.js create mode 100644 gsap-public/minified/Flip.min.js.map create mode 100644 gsap-public/minified/MotionPathPlugin.min.js create mode 100644 gsap-public/minified/MotionPathPlugin.min.js.map create mode 100644 gsap-public/minified/Observer.min.js create mode 100644 gsap-public/minified/Observer.min.js.map create mode 100644 gsap-public/minified/PixiPlugin.min.js create mode 100644 gsap-public/minified/PixiPlugin.min.js.map create mode 100644 gsap-public/minified/ScrollToPlugin.min.js create mode 100644 gsap-public/minified/ScrollToPlugin.min.js.map create mode 100644 gsap-public/minified/ScrollTrigger.min.js create mode 100644 gsap-public/minified/ScrollTrigger.min.js.map create mode 100644 gsap-public/minified/TextPlugin.min.js create mode 100644 gsap-public/minified/TextPlugin.min.js.map create mode 100644 gsap-public/minified/gsap.min.js create mode 100644 gsap-public/minified/gsap.min.js.map create mode 100644 gsap-public/src/.DS_Store create mode 100644 gsap-public/src/CSSPlugin.js create mode 100644 gsap-public/src/CSSRulePlugin.js create mode 100644 gsap-public/src/CustomEase.js create mode 100644 gsap-public/src/Draggable.js create mode 100644 gsap-public/src/EasePack.js create mode 100644 gsap-public/src/EaselPlugin.js create mode 100644 gsap-public/src/Flip.js create mode 100644 gsap-public/src/MotionPathPlugin.js create mode 100644 gsap-public/src/Observer.js create mode 100644 gsap-public/src/PixiPlugin.js create mode 100644 gsap-public/src/ScrollToPlugin.js create mode 100644 gsap-public/src/ScrollTrigger.js create mode 100644 gsap-public/src/TextPlugin.js create mode 100644 gsap-public/src/all.js create mode 100644 gsap-public/src/gsap-core.js create mode 100644 gsap-public/src/index.js create mode 100644 gsap-public/src/utils/matrix.js create mode 100644 gsap-public/src/utils/paths.js create mode 100644 gsap-public/src/utils/strings.js create mode 100644 gsap-public/umd/.DS_Store create mode 100644 gsap-public/umd/CSSRulePlugin.js create mode 100644 gsap-public/umd/CustomEase.js create mode 100644 gsap-public/umd/Draggable.js create mode 100644 gsap-public/umd/EasePack.js create mode 100644 gsap-public/umd/EaselPlugin.js create mode 100644 gsap-public/umd/Flip.js create mode 100644 gsap-public/umd/MotionPathPlugin.js create mode 100644 gsap-public/umd/Observer.js create mode 100644 gsap-public/umd/PixiPlugin.js create mode 100644 gsap-public/umd/ScrollToPlugin.js create mode 100644 gsap-public/umd/ScrollTrigger.js create mode 100644 gsap-public/umd/TextPlugin.js create mode 100644 gsap-public/umd/all.js create mode 100644 gsap-public/umd/gsap.js diff --git a/__MACOSX/gsap-public/._.DS_Store b/__MACOSX/gsap-public/._.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a5b28df1cbc6e15bd0d35cdadd0c2e65d5131c7d GIT binary patch literal 120 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}u^SMB_!U6R08`;00ODZ-jv*mIP;rnB Iur73U08|YJ=l}o! literal 0 HcmV?d00001 diff --git a/__MACOSX/gsap-public/._docs-link.html b/__MACOSX/gsap-public/._docs-link.html new file mode 100644 index 0000000000000000000000000000000000000000..0b09af82610df3bf5bce4ecf5afeb4c63d5ea106 GIT binary patch literal 176 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}aUBqY_#1$j2;dkJ5(HHS(y;)D1)zKw z#Rz090AirHRC0c$Vqox1Ojhs@R)|o50+1L3ClDI}aUBqY_#1$j2;dkJ5(HHS(y;)D1)zKw z#Rz090AirHRC0c$Vqox1Ojhs@R)|o50+1L3ClDI}u^SMB_!U6R08`;00ODZ-jv*mIP;rnB Iur73U08|YJ=l}o! literal 0 HcmV?d00001 diff --git a/__MACOSX/gsap-public/minified/._.DS_Store b/__MACOSX/gsap-public/minified/._.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a5b28df1cbc6e15bd0d35cdadd0c2e65d5131c7d GIT binary patch literal 120 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}u^SMB_!U6R08`;00ODZ-jv*mIP;rnB Iur73U08|YJ=l}o! literal 0 HcmV?d00001 diff --git a/__MACOSX/gsap-public/src/._.DS_Store b/__MACOSX/gsap-public/src/._.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a5b28df1cbc6e15bd0d35cdadd0c2e65d5131c7d GIT binary patch literal 120 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}u^SMB_!U6R08`;00ODZ-jv*mIP;rnB Iur73U08|YJ=l}o! literal 0 HcmV?d00001 diff --git a/__MACOSX/gsap-public/umd/._.DS_Store b/__MACOSX/gsap-public/umd/._.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a5b28df1cbc6e15bd0d35cdadd0c2e65d5131c7d GIT binary patch literal 120 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDI}u^SMB_!U6R08`;00ODZ-jv*mIP;rnB Iur73U08|YJ=l}o! literal 0 HcmV?d00001 diff --git a/gsap-public/.DS_Store b/gsap-public/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e2b6f19cf9dd9d18670c7b126e1ac093f1352a29 GIT binary patch literal 10244 zcmeHMUu+ab7@u#i&{?`m=UPw-)E+cwqb;-*p`gOGcNMV3R<5Pj0v>m_3*E4{TW
)33=rn1kNEwfzMK(Km=o|fAK=dn{tgAa*>U`c z*PTFA$lw|v5Fk*A0N=ZZh)x`m%S_JQzng~Rwzr=JDO9y+aW$=`HS|DY+@4IhX}93? zr1SfDZOFFGOsSmC>^1bs6k8UvEjMjgdfqcIG#$I_A2BS=p6sy;mgac23DH1hDyLY( z)Ko{;#`e}o$EL37*2vVBPAqS{b<^~;OqVxrxP4FRh?%qOCxr*#uL49Z^XT|L?r2Wd z%;4?u9=?agMBXxO>o98g0F>m2K`hLNFzZBHC^PqA<|ZDtE*+SR*F zGhsZSJ0n@!EaWVQ_s-^R(;T!NgAX&BboFB{?^Dr~9CPfv8}kfPj1?SxkB(y+MLmuq zJ4pkl==tGELvzPR(@s{m zG{ZVPQZyVRW9mazI;V%>kSu#v4J%bOS;!bi3x<0?Yo>IzK3vC?CUuR>-lh9BoO-vd z@ewtzMQu{oQM!-oV|g8~Lanr@H_I$dha9{^F+`iPL1vCTbOZxIn06`~DbwU(Go8^* zq1vo$p{!3HDGGFj@(yJi4MVG(%-Xpe`r`<7w;H4DGkPDNyFcx?0~5N1({tZ@n^bj_ z>$^2g*U*VwclR-Mw>nVrx*QG4zNTZ&csj2SOk&`c`X?y$9x&?p485A++Ls$gcq22c zqJe7yK1;DQH1mMtsX5vr3ZBPubF^JlG42{kCyA3JIY{zkiku+Nk(1;UIZfUpXUM1I zEAj(5Pktd6$nWGYa*yc;T<>yAHx@L7QTh=;5_^czri2yCtQR} z5|zSIom4Nalh#Wcq;@GL^-IIjn6yvazf@X$4*34~Lej8srRefcMWtu15?woX?%1XD zUBl7!eXWS6>#kq1h6h>KojsSSD9Bsl>)bf-s6Q`YJR*4UR?gXmm8(`a-k_+%7#sSr za&neP%c^-4&{^JlZL^}XMHoGzdQ%Hl7h~jzYHORSG6@4#R69CVg@rI2WzV*zO;!Bj zmaU4ysxU0&+0`poH7MJaZkaCzjCeg`aU6#S8U3%c{+!H`bL1!TE4cs!7Qqr|fVI#9 z>ygA!=z(6i3w9up_rMSgdt^={l{L`8f(fLvgM^-j2jL-j7#@M+Z~~r!XOYw|!b?c& zSCQ7Q!%27pPQw}a06v6|;1l=~zJb{?()Q0ME&O;T(w4m_L-=`+C)tJadi33y`%?5( z6@C}+6Jf!87KDiB&V0W;Rhi%ODH7BI1OfyC1OfyW7y=>TPlTWU_g?+~{{r(ma3??@ zKwvHcP!&(adr(u_*v@U_Wq#Hk!F&)iPrToZke&%%=KTo33O|nbw*S~x+V^w2DC)VK a5fV$7{`a2&!T#U+H>YdC{(s@^|NjONYImvt literal 0 HcmV?d00001 diff --git a/gsap-public/docs-link.html b/gsap-public/docs-link.html new file mode 100644 index 0000000..9f79b00 --- /dev/null +++ b/gsap-public/docs-link.html @@ -0,0 +1,13 @@ + + + + + + +GSAP Documentation + + + + diff --git a/gsap-public/esm/.DS_Store b/gsap-public/esm/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ce2147ef4642d032b1e02ac680043c6fd7db52db GIT binary patch literal 6148 zcmeHK%}T>S5Z>*NZYp9Af_lrvTMvyDss|y|dhjMh^q|rvrr1DCN|RW$R`MMBM!tZr zIPA7D2oHX2PxN=LFC7yR-8qCBKL9Bf)Iu< zI@O)=c(2i@*G$VgoYc&5vkCrw<6tr|#MZ8LblSatd>TJbUS1Wo9DajRHZ)G*4V<|% z`pIqR!MDWax$uKCjKVm&gXnZ4%pf5Khyh|?2^rAWoLF1Jv(b@=0b<~H4B-7>f+E@) zbA|Hi03$~Lz!HR|fRD2T)|eV?jk!Wt0pY3?P?d5$VsKRsaZ~5n8gqrJoN+yTaQ$Si zCloH94*Q!jopD?~_{spzejrus|0h4s|1yaTF+dC~Cj-3HcG@jCo9?X(r^H@s tf_6bsFfUg)D*;EgV#vi-ybUS^;wCzPw#Hl`L_p||fTV#8G4Q7hd;;djS0DfY literal 0 HcmV?d00001 diff --git a/gsap-public/esm/CSSPlugin.js b/gsap-public/esm/CSSPlugin.js new file mode 100644 index 0000000..0dac85a --- /dev/null +++ b/gsap-public/esm/CSSPlugin.js @@ -0,0 +1,1552 @@ +/*! + * CSSPlugin 3.11.5 + * https://greensock.com + * + * Copyright 2008-2023, GreenSock. All rights reserved. + * Subject to the terms at https://greensock.com/standard-license or for + * Club GreenSock members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com +*/ + +/* eslint-disable */ +import { gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative, _setDefaults, _removeLinkedListItem //for the commented-out className feature. +} from "./gsap-core.js"; + +var _win, + _doc, + _docElement, + _pluginInitted, + _tempDiv, + _tempDivStyler, + _recentSetterPlugin, + _reverting, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _transformProps = {}, + _RAD2DEG = 180 / Math.PI, + _DEG2RAD = Math.PI / 180, + _atan2 = Math.atan2, + _bigNum = 1e8, + _capsExp = /([A-Z])/g, + _horizontalExp = /(left|right|width|margin|padding|x)/i, + _complexExp = /[\s,\(]\S/, + _propertyAliases = { + autoAlpha: "opacity,visibility", + scale: "scaleX,scaleY", + alpha: "opacity" +}, + _renderCSSProp = function _renderCSSProp(ratio, data) { + return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data); +}, + _renderPropWithEnd = function _renderPropWithEnd(ratio, data) { + return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data); +}, + _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) { + return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data); +}, + //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0) +_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) { + var value = data.s + data.c * ratio; + data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data); +}, + _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) { + return data.set(data.t, data.p, ratio ? data.e : data.b, data); +}, + _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) { + return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data); +}, + _setterCSSStyle = function _setterCSSStyle(target, property, value) { + return target.style[property] = value; +}, + _setterCSSProp = function _setterCSSProp(target, property, value) { + return target.style.setProperty(property, value); +}, + _setterTransform = function _setterTransform(target, property, value) { + return target._gsap[property] = value; +}, + _setterScale = function _setterScale(target, property, value) { + return target._gsap.scaleX = target._gsap.scaleY = value; +}, + _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) { + var cache = target._gsap; + cache.scaleX = cache.scaleY = value; + cache.renderTransform(ratio, cache); +}, + _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) { + var cache = target._gsap; + cache[property] = value; + cache.renderTransform(ratio, cache); +}, + _transformProp = "transform", + _transformOriginProp = _transformProp + "Origin", + _saveStyle = function _saveStyle(property, isNotCSS) { + var _this = this; + + var target = this.target, + style = target.style; + + if (property in _transformProps) { + this.tfm = this.tfm || {}; + + if (property !== "transform") { + property = _propertyAliases[property] || property; + ~property.indexOf(",") ? property.split(",").forEach(function (a) { + return _this.tfm[a] = _get(target, a); + }) : this.tfm[property] = target._gsap.x ? target._gsap[property] : _get(target, property); // note: scale would map to "scaleX,scaleY", thus we loop and apply them both. + } else { + return _propertyAliases.transform.split(",").forEach(function (p) { + return _saveStyle.call(_this, p, isNotCSS); + }); + } + + if (this.props.indexOf(_transformProp) >= 0) { + return; + } + + if (target._gsap.svg) { + this.svgo = target.getAttribute("data-svg-origin"); + this.props.push(_transformOriginProp, isNotCSS, ""); + } + + property = _transformProp; + } + + (style || isNotCSS) && this.props.push(property, isNotCSS, style[property]); +}, + _removeIndependentTransforms = function _removeIndependentTransforms(style) { + if (style.translate) { + style.removeProperty("translate"); + style.removeProperty("scale"); + style.removeProperty("rotate"); + } +}, + _revertStyle = function _revertStyle() { + var props = this.props, + target = this.target, + style = target.style, + cache = target._gsap, + i, + p; + + for (i = 0; i < props.length; i += 3) { + // stored like this: property, isNotCSS, value + props[i + 1] ? target[props[i]] = props[i + 2] : props[i + 2] ? style[props[i]] = props[i + 2] : style.removeProperty(props[i].substr(0, 2) === "--" ? props[i] : props[i].replace(_capsExp, "-$1").toLowerCase()); + } + + if (this.tfm) { + for (p in this.tfm) { + cache[p] = this.tfm[p]; + } + + if (cache.svg) { + cache.renderTransform(); + target.setAttribute("data-svg-origin", this.svgo || ""); + } + + i = _reverting(); + + if ((!i || !i.isStart) && !style[_transformProp]) { + _removeIndependentTransforms(style); + + cache.uncache = 1; // if it's a startAt that's being reverted in the _initTween() of the core, we don't need to uncache transforms. This is purely a performance optimization. + } + } +}, + _getStyleSaver = function _getStyleSaver(target, properties) { + var saver = { + target: target, + props: [], + revert: _revertStyle, + save: _saveStyle + }; + target._gsap || gsap.core.getCache(target); // just make sure there's a _gsap cache defined because we read from it in _saveStyle() and it's more efficient to just check it here once. + + properties && properties.split(",").forEach(function (p) { + return saver.save(p); + }); + return saver; +}, + _supports3D, + _createElement = function _createElement(type, ns) { + var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible. + + return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/). +}, + _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) { + var cs = getComputedStyle(target); + return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || ""; //css variables may not need caps swapped out for dashes and lowercase. +}, + _prefixes = "O,Moz,ms,Ms,Webkit".split(","), + _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) { + var e = element || _tempDiv, + s = e.style, + i = 5; + + if (property in s && !preferPrefix) { + return property; + } + + property = property.charAt(0).toUpperCase() + property.substr(1); + + while (i-- && !(_prefixes[i] + property in s)) {} + + return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property; +}, + _initCore = function _initCore() { + if (_windowExists() && window.document) { + _win = window; + _doc = _win.document; + _docElement = _doc.documentElement; + _tempDiv = _createElement("div") || { + style: {} + }; + _tempDivStyler = _createElement("div"); + _transformProp = _checkPropPrefix(_transformProp); + _transformOriginProp = _transformProp + "Origin"; + _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets. + + _supports3D = !!_checkPropPrefix("perspective"); + _reverting = gsap.core.reverting; + _pluginInitted = 1; + } +}, + _getBBoxHack = function _getBBoxHack(swapIfPossible) { + //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a element and/or . We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it). + var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), + oldParent = this.parentNode, + oldSibling = this.nextSibling, + oldCSS = this.style.cssText, + bbox; + + _docElement.appendChild(svg); + + svg.appendChild(this); + this.style.display = "block"; + + if (swapIfPossible) { + try { + bbox = this.getBBox(); + this._gsapBBox = this.getBBox; //store the original + + this.getBBox = _getBBoxHack; + } catch (e) {} + } else if (this._gsapBBox) { + bbox = this._gsapBBox(); + } + + if (oldParent) { + if (oldSibling) { + oldParent.insertBefore(this, oldSibling); + } else { + oldParent.appendChild(this); + } + } + + _docElement.removeChild(svg); + + this.style.cssText = oldCSS; + return bbox; +}, + _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) { + var i = attributesArray.length; + + while (i--) { + if (target.hasAttribute(attributesArray[i])) { + return target.getAttribute(attributesArray[i]); + } + } +}, + _getBBox = function _getBBox(target) { + var bounds; + + try { + bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a or ). https://bugzilla.mozilla.org/show_bug.cgi?id=612118 + } catch (error) { + bounds = _getBBoxHack.call(target, true); + } + + bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case. + + return bounds && !bounds.width && !bounds.x && !bounds.y ? { + x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0, + y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0, + width: 0, + height: 0 + } : bounds; +}, + _isSVG = function _isSVG(e) { + return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e)); +}, + //reports if the element is an SVG on which getBBox() actually works +_removeProperty = function _removeProperty(target, property) { + if (property) { + var style = target.style; + + if (property in _transformProps && property !== _transformOriginProp) { + property = _transformProp; + } + + if (style.removeProperty) { + if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") { + //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example) + property = "-" + property; + } + + style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase()); + } else { + //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" + style.removeAttribute(property); + } + } +}, + _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) { + var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue); + plugin._pt = pt; + pt.b = beginning; + pt.e = end; + + plugin._props.push(property); + + return pt; +}, + _nonConvertibleUnits = { + deg: 1, + rad: 1, + turn: 1 +}, + _nonStandardLayouts = { + grid: 1, + flex: 1 +}, + //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount. +_convertToUnit = function _convertToUnit(target, property, value, unit) { + var curValue = parseFloat(value) || 0, + curUnit = (value + "").trim().substr((curValue + "").length) || "px", + // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim() + style = _tempDiv.style, + horizontal = _horizontalExp.test(property), + isRootSVG = target.tagName.toLowerCase() === "svg", + measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"), + amount = 100, + toPixels = unit === "px", + toPercent = unit === "%", + px, + parent, + cache, + isSVG; + + if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) { + return curValue; + } + + curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px")); + isSVG = target.getCTM && _isSVG(target); + + if ((toPercent || curUnit === "%") && (_transformProps[property] || ~property.indexOf("adius"))) { + px = isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]; + return _round(toPercent ? curValue / px * amount : curValue / 100 * px); + } + + style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit); + parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode; + + if (isSVG) { + parent = (target.ownerSVGElement || {}).parentNode; + } + + if (!parent || parent === _doc || !parent.appendChild) { + parent = _doc.body; + } + + cache = parent._gsap; + + if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) { + return _round(curValue / cache.width * amount); + } else { + (toPercent || curUnit === "%") && !_nonStandardLayouts[_getComputedProperty(parent, "display")] && (style.position = _getComputedProperty(target, "position")); + parent === target && (style.position = "static"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that. + + parent.appendChild(_tempDiv); + px = _tempDiv[measureProperty]; + parent.removeChild(_tempDiv); + style.position = "absolute"; + + if (horizontal && toPercent) { + cache = _getCache(parent); + cache.time = _ticker.time; + cache.width = parent[measureProperty]; + } + } + + return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0); +}, + _get = function _get(target, property, unit, uncache) { + var value; + _pluginInitted || _initCore(); + + if (property in _propertyAliases && property !== "transform") { + property = _propertyAliases[property]; + + if (~property.indexOf(",")) { + property = property.split(",")[0]; + } + } + + if (_transformProps[property] && property !== "transform") { + value = _parseTransform(target, uncache); + value = property !== "transformOrigin" ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px"; + } else { + value = target.style[property]; + + if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) { + value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === "opacity" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like borderTopLeftRadius + } + } + + return unit && !~(value + "").trim().indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value; +}, + _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) { + // note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin. + if (!start || start === "none") { + // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style ("clipPath" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as "none" whereas WebkitClipPath reports accurately like "ellipse(100% 0% at 50% 0%)", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/ + var p = _checkPropPrefix(prop, target, 1), + s = p && _getComputedProperty(target, p, 1); + + if (s && s !== start) { + prop = p; + start = s; + } else if (prop === "borderColor") { + start = _getComputedProperty(target, "borderTopColor"); // Firefox bug: always reports "borderColor" as "", so we must fall back to borderTopColor. See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/ + } + } + + var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString), + index = 0, + matchIndex = 0, + a, + result, + startValues, + startNum, + color, + startValue, + endValue, + endNum, + chunk, + endUnit, + startUnit, + endValues; + pt.b = start; + pt.e = end; + start += ""; // ensure values are strings + + end += ""; + + if (end === "auto") { + target.style[prop] = end; + end = _getComputedProperty(target, prop) || end; + target.style[prop] = start; + } + + a = [start, end]; + + _colorStringFilter(a); // pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow(). + + + start = a[0]; + end = a[1]; + startValues = start.match(_numWithUnitExp) || []; + endValues = end.match(_numWithUnitExp) || []; + + if (endValues.length) { + while (result = _numWithUnitExp.exec(end)) { + endValue = result[0]; + chunk = end.substring(index, result.index); + + if (color) { + color = (color + 1) % 5; + } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") { + color = 1; + } + + if (endValue !== (startValue = startValues[matchIndex++] || "")) { + startNum = parseFloat(startValue) || 0; + startUnit = startValue.substr((startNum + "").length); + endValue.charAt(1) === "=" && (endValue = _parseRelative(startNum, endValue) + startUnit); + endNum = parseFloat(endValue); + endUnit = endValue.substr((endNum + "").length); + index = _numWithUnitExp.lastIndex - endUnit.length; + + if (!endUnit) { + //if something like "perspective:300" is passed in and we must add a unit to the end + endUnit = endUnit || _config.units[prop] || startUnit; + + if (index === end.length) { + end += endUnit; + pt.e += endUnit; + } + } + + if (startUnit !== endUnit) { + startNum = _convertToUnit(target, prop, startValue, endUnit) || 0; + } // these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method. + + + pt._pt = { + _next: pt._pt, + p: chunk || matchIndex === 1 ? chunk : ",", + //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case. + s: startNum, + c: endNum - startNum, + m: color && color < 4 || prop === "zIndex" ? Math.round : 0 + }; + } + } + + pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number) + } else { + pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue; + } + + _relExp.test(end) && (pt.e = 0); //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value). + + this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus "this" would refer to the plugin. + + return pt; +}, + _keywordToPercent = { + top: "0%", + bottom: "100%", + left: "0%", + right: "100%", + center: "50%" +}, + _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) { + var split = value.split(" "), + x = split[0], + y = split[1] || "50%"; + + if (x === "top" || x === "bottom" || y === "left" || y === "right") { + //the user provided them in the wrong order, so flip them + value = x; + x = y; + y = value; + } + + split[0] = _keywordToPercent[x] || x; + split[1] = _keywordToPercent[y] || y; + return split.join(" "); +}, + _renderClearProps = function _renderClearProps(ratio, data) { + if (data.tween && data.tween._time === data.tween._dur) { + var target = data.t, + style = target.style, + props = data.u, + cache = target._gsap, + prop, + clearTransforms, + i; + + if (props === "all" || props === true) { + style.cssText = ""; + clearTransforms = 1; + } else { + props = props.split(","); + i = props.length; + + while (--i > -1) { + prop = props[i]; + + if (_transformProps[prop]) { + clearTransforms = 1; + prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp; + } + + _removeProperty(target, prop); + } + } + + if (clearTransforms) { + _removeProperty(target, _transformProp); + + if (cache) { + cache.svg && target.removeAttribute("transform"); + + _parseTransform(target, 1); // force all the cached values back to "normal"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values. + + + cache.uncache = 1; + + _removeIndependentTransforms(style); + } + } + } +}, + // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list. +_specialProps = { + clearProps: function clearProps(plugin, target, property, endValue, tween) { + if (tween.data !== "isFromStart") { + var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps); + pt.u = endValue; + pt.pr = -10; + pt.tween = tween; + + plugin._props.push(property); + + return 1; + } + } + /* className feature (about 0.4kb gzipped). + , className(plugin, target, property, endValue, tween) { + let _renderClassName = (ratio, data) => { + data.css.render(ratio, data.css); + if (!ratio || ratio === 1) { + let inline = data.rmv, + target = data.t, + p; + target.setAttribute("class", ratio ? data.e : data.b); + for (p in inline) { + _removeProperty(target, p); + } + } + }, + _getAllStyles = (target) => { + let styles = {}, + computed = getComputedStyle(target), + p; + for (p in computed) { + if (isNaN(p) && p !== "cssText" && p !== "length") { + styles[p] = computed[p]; + } + } + _setDefaults(styles, _parseTransform(target, 1)); + return styles; + }, + startClassList = target.getAttribute("class"), + style = target.style, + cssText = style.cssText, + cache = target._gsap, + classPT = cache.classPT, + inlineToRemoveAtEnd = {}, + data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")}, + changingVars = {}, + startVars = _getAllStyles(target), + transformRelated = /(transform|perspective)/i, + endVars, p; + if (classPT) { + classPT.r(1, classPT.d); + _removeLinkedListItem(classPT.d.plugin, classPT, "_pt"); + } + target.setAttribute("class", data.e); + endVars = _getAllStyles(target, true); + target.setAttribute("class", startClassList); + for (p in endVars) { + if (endVars[p] !== startVars[p] && !transformRelated.test(p)) { + changingVars[p] = endVars[p]; + if (!style[p] && style[p] !== "0") { + inlineToRemoveAtEnd[p] = 1; + } + } + } + cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11); + if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/. + style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity). + } + _parseTransform(target, true); //to clear the caching of transforms + data.css = new gsap.plugins.css(); + data.css.init(target, changingVars, tween); + plugin._props.push(...data.css._props); + return 1; + } + */ + +}, + +/* + * -------------------------------------------------------------------------------------- + * TRANSFORMS + * -------------------------------------------------------------------------------------- + */ +_identity2DMatrix = [1, 0, 0, 1, 0, 0], + _rotationalProperties = {}, + _isNullTransform = function _isNullTransform(value) { + return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value; +}, + _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) { + var matrixString = _getComputedProperty(target, _transformProp); + + return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round); +}, + _getMatrix = function _getMatrix(target, force2D) { + var cache = target._gsap || _getCache(target), + style = target.style, + matrix = _getComputedTransformMatrixAsArray(target), + parent, + nextSibling, + temp, + addedToDOM; + + if (cache.svg && target.getAttribute("transform")) { + temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like "translate(50,60) rotate(135,0,0)" are parsed because it mashes it into a matrix. + + matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f]; + return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix; + } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) { + //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397 + //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px). + temp = style.display; + style.display = "block"; + parent = target.parentNode; + + if (!parent || !target.offsetParent) { + // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375 + addedToDOM = 1; //flag + + nextSibling = target.nextElementSibling; + + _docElement.appendChild(target); //we must add it to the DOM in order to get values properly + + } + + matrix = _getComputedTransformMatrixAsArray(target); + temp ? style.display = temp : _removeProperty(target, "display"); + + if (addedToDOM) { + nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target); + } + } + + return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix; +}, + _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) { + var cache = target._gsap, + matrix = matrixArray || _getMatrix(target, true), + xOriginOld = cache.xOrigin || 0, + yOriginOld = cache.yOrigin || 0, + xOffsetOld = cache.xOffset || 0, + yOffsetOld = cache.yOffset || 0, + a = matrix[0], + b = matrix[1], + c = matrix[2], + d = matrix[3], + tx = matrix[4], + ty = matrix[5], + originSplit = origin.split(" "), + xOrigin = parseFloat(originSplit[0]) || 0, + yOrigin = parseFloat(originSplit[1]) || 0, + bounds, + determinant, + x, + y; + + if (!originIsAbsolute) { + bounds = _getBBox(target); + xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin); + yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin); + } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) { + //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero. + x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant; + y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant; + xOrigin = x; + yOrigin = y; + } + + if (smooth || smooth !== false && cache.smooth) { + tx = xOrigin - xOriginOld; + ty = yOrigin - yOriginOld; + cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx; + cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty; + } else { + cache.xOffset = cache.yOffset = 0; + } + + cache.xOrigin = xOrigin; + cache.yOrigin = yOrigin; + cache.smooth = !!smooth; + cache.origin = origin; + cache.originIsAbsolute = !!originIsAbsolute; + target.style[_transformOriginProp] = "0px 0px"; //otherwise, if someone sets an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value). + + if (pluginToAddPropTweensTo) { + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset); + + _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset); + } + + target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin); +}, + _parseTransform = function _parseTransform(target, uncache) { + var cache = target._gsap || new GSCache(target); + + if ("x" in cache && !uncache && !cache.uncache) { + return cache; + } + + var style = target.style, + invertedScaleX = cache.scaleX < 0, + px = "px", + deg = "deg", + cs = getComputedStyle(target), + origin = _getComputedProperty(target, _transformOriginProp) || "0", + x, + y, + z, + scaleX, + scaleY, + rotation, + rotationX, + rotationY, + skewX, + skewY, + perspective, + xOrigin, + yOrigin, + matrix, + angle, + cos, + sin, + a, + b, + c, + d, + a12, + a22, + t1, + t2, + t3, + a13, + a23, + a33, + a42, + a43, + a32; + x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0; + scaleX = scaleY = 1; + cache.svg = !!(target.getCTM && _isSVG(target)); + + if (cs.translate) { + // accommodate independent transforms by combining them into normal ones. + if (cs.translate !== "none" || cs.scale !== "none" || cs.rotate !== "none") { + style[_transformProp] = (cs.translate !== "none" ? "translate3d(" + (cs.translate + " 0 0").split(" ").slice(0, 3).join(", ") + ") " : "") + (cs.rotate !== "none" ? "rotate(" + cs.rotate + ") " : "") + (cs.scale !== "none" ? "scale(" + cs.scale.split(" ").join(",") + ") " : "") + (cs[_transformProp] !== "none" ? cs[_transformProp] : ""); + } + + style.scale = style.rotate = style.translate = "none"; + } + + matrix = _getMatrix(target, cache.svg); + + if (cache.svg) { + if (cache.uncache) { + // if cache.uncache is true (and maybe if origin is 0,0), we need to set element.style.transformOrigin = (cache.xOrigin - bbox.x) + "px " + (cache.yOrigin - bbox.y) + "px". Previously we let the data-svg-origin stay instead, but when introducing revert(), it complicated things. + t2 = target.getBBox(); + origin = cache.xOrigin - t2.x + "px " + (cache.yOrigin - t2.y) + "px"; + t1 = ""; + } else { + t1 = !uncache && target.getAttribute("data-svg-origin"); // Remember, to work around browser inconsistencies we always force SVG elements' transformOrigin to 0,0 and offset the translation accordingly. + } + + _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix); + } + + xOrigin = cache.xOrigin || 0; + yOrigin = cache.yOrigin || 0; + + if (matrix !== _identity2DMatrix) { + a = matrix[0]; //a11 + + b = matrix[1]; //a21 + + c = matrix[2]; //a31 + + d = matrix[3]; //a41 + + x = a12 = matrix[4]; + y = a22 = matrix[5]; //2D matrix + + if (matrix.length === 6) { + scaleX = Math.sqrt(a * a + b * b); + scaleY = Math.sqrt(d * d + c * c); + rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist). + + skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0; + skewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD))); + + if (cache.svg) { + x -= xOrigin - (xOrigin * a + yOrigin * c); + y -= yOrigin - (xOrigin * b + yOrigin * d); + } //3D matrix + + } else { + a32 = matrix[6]; + a42 = matrix[7]; + a13 = matrix[8]; + a23 = matrix[9]; + a33 = matrix[10]; + a43 = matrix[11]; + x = matrix[12]; + y = matrix[13]; + z = matrix[14]; + angle = _atan2(a32, a33); + rotationX = angle * _RAD2DEG; //rotationX + + if (angle) { + cos = Math.cos(-angle); + sin = Math.sin(-angle); + t1 = a12 * cos + a13 * sin; + t2 = a22 * cos + a23 * sin; + t3 = a32 * cos + a33 * sin; + a13 = a12 * -sin + a13 * cos; + a23 = a22 * -sin + a23 * cos; + a33 = a32 * -sin + a33 * cos; + a43 = a42 * -sin + a43 * cos; + a12 = t1; + a22 = t2; + a32 = t3; + } //rotationY + + + angle = _atan2(-c, a33); + rotationY = angle * _RAD2DEG; + + if (angle) { + cos = Math.cos(-angle); + sin = Math.sin(-angle); + t1 = a * cos - a13 * sin; + t2 = b * cos - a23 * sin; + t3 = c * cos - a33 * sin; + a43 = d * sin + a43 * cos; + a = t1; + b = t2; + c = t3; + } //rotationZ + + + angle = _atan2(b, a); + rotation = angle * _RAD2DEG; + + if (angle) { + cos = Math.cos(angle); + sin = Math.sin(angle); + t1 = a * cos + b * sin; + t2 = a12 * cos + a22 * sin; + b = b * cos - a * sin; + a22 = a22 * cos - a12 * sin; + a = t1; + a12 = t2; + } + + if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) { + //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here. + rotationX = rotation = 0; + rotationY = 180 - rotationY; + } + + scaleX = _round(Math.sqrt(a * a + b * b + c * c)); + scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32)); + angle = _atan2(a12, a22); + skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0; + perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0; + } + + if (cache.svg) { + //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline). + t1 = target.getAttribute("transform"); + cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp)); + t1 && target.setAttribute("transform", t1); + } + } + + if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) { + if (invertedScaleX) { + scaleX *= -1; + skewX += rotation <= 0 ? 180 : -180; + rotation += rotation <= 0 ? 180 : -180; + } else { + scaleY *= -1; + skewX += skewX <= 0 ? 180 : -180; + } + } + + uncache = uncache || cache.uncache; + cache.x = x - ((cache.xPercent = x && (!uncache && cache.xPercent || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px; + cache.y = y - ((cache.yPercent = y && (!uncache && cache.yPercent || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px; + cache.z = z + px; + cache.scaleX = _round(scaleX); + cache.scaleY = _round(scaleY); + cache.rotation = _round(rotation) + deg; + cache.rotationX = _round(rotationX) + deg; + cache.rotationY = _round(rotationY) + deg; + cache.skewX = skewX + deg; + cache.skewY = skewY + deg; + cache.transformPerspective = perspective + px; + + if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) { + style[_transformOriginProp] = _firstTwoOnly(origin); + } + + cache.xOffset = cache.yOffset = 0; + cache.force3D = _config.force3D; + cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms; + cache.uncache = 0; + return cache; +}, + _firstTwoOnly = function _firstTwoOnly(value) { + return (value = value.split(" "))[0] + " " + value[1]; +}, + //for handling transformOrigin values, stripping out the 3rd dimension +_addPxTranslate = function _addPxTranslate(target, start, value) { + var unit = getUnit(start); + return _round(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit; +}, + _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) { + cache.z = "0px"; + cache.rotationY = cache.rotationX = "0deg"; + cache.force3D = 0; + + _renderCSSTransforms(ratio, cache); +}, + _zeroDeg = "0deg", + _zeroPx = "0px", + _endParenthesis = ") ", + _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) { + var _ref = cache || this, + xPercent = _ref.xPercent, + yPercent = _ref.yPercent, + x = _ref.x, + y = _ref.y, + z = _ref.z, + rotation = _ref.rotation, + rotationY = _ref.rotationY, + rotationX = _ref.rotationX, + skewX = _ref.skewX, + skewY = _ref.skewY, + scaleX = _ref.scaleX, + scaleY = _ref.scaleY, + transformPerspective = _ref.transformPerspective, + force3D = _ref.force3D, + target = _ref.target, + zOrigin = _ref.zOrigin, + transforms = "", + use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually) + + + if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) { + var angle = parseFloat(rotationY) * _DEG2RAD, + a13 = Math.sin(angle), + a33 = Math.cos(angle), + cos; + + angle = parseFloat(rotationX) * _DEG2RAD; + cos = Math.cos(angle); + x = _addPxTranslate(target, x, a13 * cos * -zOrigin); + y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin); + z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin); + } + + if (transformPerspective !== _zeroPx) { + transforms += "perspective(" + transformPerspective + _endParenthesis; + } + + if (xPercent || yPercent) { + transforms += "translate(" + xPercent + "%, " + yPercent + "%) "; + } + + if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) { + transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis; + } + + if (rotation !== _zeroDeg) { + transforms += "rotate(" + rotation + _endParenthesis; + } + + if (rotationY !== _zeroDeg) { + transforms += "rotateY(" + rotationY + _endParenthesis; + } + + if (rotationX !== _zeroDeg) { + transforms += "rotateX(" + rotationX + _endParenthesis; + } + + if (skewX !== _zeroDeg || skewY !== _zeroDeg) { + transforms += "skew(" + skewX + ", " + skewY + _endParenthesis; + } + + if (scaleX !== 1 || scaleY !== 1) { + transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis; + } + + target.style[_transformProp] = transforms || "translate(0, 0)"; +}, + _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) { + var _ref2 = cache || this, + xPercent = _ref2.xPercent, + yPercent = _ref2.yPercent, + x = _ref2.x, + y = _ref2.y, + rotation = _ref2.rotation, + skewX = _ref2.skewX, + skewY = _ref2.skewY, + scaleX = _ref2.scaleX, + scaleY = _ref2.scaleY, + target = _ref2.target, + xOrigin = _ref2.xOrigin, + yOrigin = _ref2.yOrigin, + xOffset = _ref2.xOffset, + yOffset = _ref2.yOffset, + forceCSS = _ref2.forceCSS, + tx = parseFloat(x), + ty = parseFloat(y), + a11, + a21, + a12, + a22, + temp; + + rotation = parseFloat(rotation); + skewX = parseFloat(skewX); + skewY = parseFloat(skewY); + + if (skewY) { + //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees. + skewY = parseFloat(skewY); + skewX += skewY; + rotation += skewY; + } + + if (rotation || skewX) { + rotation *= _DEG2RAD; + skewX *= _DEG2RAD; + a11 = Math.cos(rotation) * scaleX; + a21 = Math.sin(rotation) * scaleX; + a12 = Math.sin(rotation - skewX) * -scaleY; + a22 = Math.cos(rotation - skewX) * scaleY; + + if (skewX) { + skewY *= _DEG2RAD; + temp = Math.tan(skewX - skewY); + temp = Math.sqrt(1 + temp * temp); + a12 *= temp; + a22 *= temp; + + if (skewY) { + temp = Math.tan(skewY); + temp = Math.sqrt(1 + temp * temp); + a11 *= temp; + a21 *= temp; + } + } + + a11 = _round(a11); + a21 = _round(a21); + a12 = _round(a12); + a22 = _round(a22); + } else { + a11 = scaleX; + a22 = scaleY; + a21 = a12 = 0; + } + + if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) { + tx = _convertToUnit(target, "x", x, "px"); + ty = _convertToUnit(target, "y", y, "px"); + } + + if (xOrigin || yOrigin || xOffset || yOffset) { + tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset); + ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset); + } + + if (xPercent || yPercent) { + //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it. + temp = target.getBBox(); + tx = _round(tx + xPercent / 100 * temp.width); + ty = _round(ty + yPercent / 100 * temp.height); + } + + temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")"; + target.setAttribute("transform", temp); + forceCSS && (target.style[_transformProp] = temp); //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the transform attribute changes!) +}, + _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue) { + var cap = 360, + isString = _isString(endValue), + endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1), + change = endNum - startNum, + finalValue = startNum + change + "deg", + direction, + pt; + + if (isString) { + direction = endValue.split("_")[1]; + + if (direction === "short") { + change %= cap; + + if (change !== change % (cap / 2)) { + change += change < 0 ? cap : -cap; + } + } + + if (direction === "cw" && change < 0) { + change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap; + } else if (direction === "ccw" && change > 0) { + change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap; + } + } + + plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd); + pt.e = finalValue; + pt.u = "deg"; + + plugin._props.push(property); + + return pt; +}, + _assign = function _assign(target, source) { + // Internet Explorer doesn't have Object.assign(), so we recreate it here. + for (var p in source) { + target[p] = source[p]; + } + + return target; +}, + _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) { + //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)" + var startCache = _assign({}, target._gsap), + exclude = "perspective,force3D,transformOrigin,svgOrigin", + style = target.style, + endCache, + p, + startValue, + endValue, + startNum, + endNum, + startUnit, + endUnit; + + if (startCache.svg) { + startValue = target.getAttribute("transform"); + target.setAttribute("transform", ""); + style[_transformProp] = transforms; + endCache = _parseTransform(target, 1); + + _removeProperty(target, _transformProp); + + target.setAttribute("transform", startValue); + } else { + startValue = getComputedStyle(target)[_transformProp]; + style[_transformProp] = transforms; + endCache = _parseTransform(target, 1); + style[_transformProp] = startValue; + } + + for (p in _transformProps) { + startValue = startCache[p]; + endValue = endCache[p]; + + if (startValue !== endValue && exclude.indexOf(p) < 0) { + //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case. + startUnit = getUnit(startValue); + endUnit = getUnit(endValue); + startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue); + endNum = parseFloat(endValue); + plugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp); + plugin._pt.u = endUnit || 0; + + plugin._props.push(p); + } + } + + _assign(endCache, startCache); +}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc. + + +_forEachName("padding,margin,Width,Radius", function (name, index) { + var t = "Top", + r = "Right", + b = "Bottom", + l = "Left", + props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) { + return index < 2 ? name + side : "border" + side + name; + }); + + _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) { + var a, vars; + + if (arguments.length < 4) { + // getter, passed target, property, and unit (from _get()) + a = props.map(function (prop) { + return _get(plugin, prop, property); + }); + vars = a.join(" "); + return vars.split(a[0]).length === 5 ? a[0] : vars; + } + + a = (endValue + "").split(" "); + vars = {}; + props.forEach(function (prop, i) { + return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0]; + }); + plugin.init(target, vars, tween); + }; +}); + +export var CSSPlugin = { + name: "css", + register: _initCore, + targetTest: function targetTest(target) { + return target.style && target.nodeType; + }, + init: function init(target, vars, tween, index, targets) { + var props = this._props, + style = target.style, + startAt = tween.vars.startAt, + startValue, + endValue, + endNum, + startNum, + type, + specialProp, + p, + startUnit, + endUnit, + relative, + isTransformRelated, + transformPropTween, + cache, + smooth, + hasPriority, + inlineProps; + _pluginInitted || _initCore(); // we may call init() multiple times on the same plugin instance, like when adding special properties, so make sure we don't overwrite the revert data or inlineProps + + this.styles = this.styles || _getStyleSaver(target); + inlineProps = this.styles.props; + this.tween = tween; + + for (p in vars) { + if (p === "autoRound") { + continue; + } + + endValue = vars[p]; + + if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) { + // plugins + continue; + } + + type = typeof endValue; + specialProp = _specialProps[p]; + + if (type === "function") { + endValue = endValue.call(tween, index, target, targets); + type = typeof endValue; + } + + if (type === "string" && ~endValue.indexOf("random(")) { + endValue = _replaceRandom(endValue); + } + + if (specialProp) { + specialProp(this, target, p, endValue, tween) && (hasPriority = 1); + } else if (p.substr(0, 2) === "--") { + //CSS variable + startValue = (getComputedStyle(target).getPropertyValue(p) + "").trim(); + endValue += ""; + _colorExp.lastIndex = 0; + + if (!_colorExp.test(startValue)) { + // colors don't have units + startUnit = getUnit(startValue); + endUnit = getUnit(endValue); + } + + endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit); + this.add(style, "setProperty", startValue, endValue, index, targets, 0, 0, p); + props.push(p); + inlineProps.push(p, 0, style[p]); + } else if (type !== "undefined") { + if (startAt && p in startAt) { + // in case someone hard-codes a complex value as the start, like top: "calc(2vh / 2)". Without this, it'd use the computed value (always in px) + startValue = typeof startAt[p] === "function" ? startAt[p].call(tween, index, target, targets) : startAt[p]; + _isString(startValue) && ~startValue.indexOf("random(") && (startValue = _replaceRandom(startValue)); + getUnit(startValue + "") || (startValue += _config.units[p] || getUnit(_get(target, p)) || ""); // for cases when someone passes in a unitless value like {x: 100}; if we try setting translate(100, 0px) it won't work. + + (startValue + "").charAt(1) === "=" && (startValue = _get(target, p)); // can't work with relative values + } else { + startValue = _get(target, p); + } + + startNum = parseFloat(startValue); + relative = type === "string" && endValue.charAt(1) === "=" && endValue.substr(0, 2); + relative && (endValue = endValue.substr(2)); + endNum = parseFloat(endValue); + + if (p in _propertyAliases) { + if (p === "autoAlpha") { + //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened. + if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) { + //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience) + startNum = 0; + } + + inlineProps.push("visibility", 0, style.visibility); + + _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum); + } + + if (p !== "scale" && p !== "transform") { + p = _propertyAliases[p]; + ~p.indexOf(",") && (p = p.split(",")[0]); + } + } + + isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED --- + + if (isTransformRelated) { + this.styles.save(p); + + if (!transformPropTween) { + cache = target._gsap; + cache.renderTransform && !vars.parseTransform || _parseTransform(target, vars.parseTransform); // if, for example, gsap.set(... {transform:"translateX(50vw)"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here. + + smooth = vars.smoothOrigin !== false && cache.smooth; + transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning) + + transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween. + } + + if (p === "scale") { + this._pt = new PropTween(this._pt, cache, "scaleY", cache.scaleY, (relative ? _parseRelative(cache.scaleY, relative + endNum) : endNum) - cache.scaleY || 0, _renderCSSProp); + this._pt.u = 0; + props.push("scaleY", p); + p += "X"; + } else if (p === "transformOrigin") { + inlineProps.push(_transformOriginProp, 0, style[_transformOriginProp]); + endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages. + + if (cache.svg) { + _applySVGOrigin(target, endValue, 0, smooth, 0, this); + } else { + endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately! + + endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit); + + _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue)); + } + + continue; + } else if (p === "svgOrigin") { + _applySVGOrigin(target, endValue, 1, smooth, 0, this); + + continue; + } else if (p in _rotationalProperties) { + _addRotationalPropTween(this, cache, p, startNum, relative ? _parseRelative(startNum, relative + endValue) : endValue); + + continue; + } else if (p === "smoothOrigin") { + _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue); + + continue; + } else if (p === "force3D") { + cache[p] = endValue; + continue; + } else if (p === "transform") { + _addRawTransformPTs(this, endValue, target); + + continue; + } + } else if (!(p in style)) { + p = _checkPropPrefix(p) || p; + } + + if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) { + startUnit = (startValue + "").substr((startNum + "").length); + endNum || (endNum = 0); // protect against NaN + + endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit); + startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit)); + this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, !isTransformRelated && (endUnit === "px" || p === "zIndex") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp); + this._pt.u = endUnit || 0; + + if (startUnit !== endUnit && endUnit !== "%") { + //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization) + this._pt.b = startValue; + this._pt.r = _renderCSSPropWithBeginning; + } + } else if (!(p in style)) { + if (p in target) { + //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that. + this.add(target, p, startValue || target[p], relative ? relative + endValue : endValue, index, targets); + } else if (p !== "parseTransform") { + _missingPlugin(p, endValue); + + continue; + } + } else { + _tweenComplexCSSString.call(this, target, p, startValue, relative ? relative + endValue : endValue); + } + + isTransformRelated || (p in style ? inlineProps.push(p, 0, style[p]) : inlineProps.push(p, 1, startValue || target[p])); + props.push(p); + } + } + + hasPriority && _sortPropTweensByPriority(this); + }, + render: function render(ratio, data) { + if (data.tween._time || !_reverting()) { + var pt = data._pt; + + while (pt) { + pt.r(ratio, pt.d); + pt = pt._next; + } + } else { + data.styles.revert(); + } + }, + get: _get, + aliases: _propertyAliases, + getSetter: function getSetter(target, property, plugin) { + //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like "x" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer. + var p = _propertyAliases[property]; + p && p.indexOf(",") < 0 && (property = p); + return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : _getSetter(target, property); + }, + core: { + _removeProperty: _removeProperty, + _getMatrix: _getMatrix + } +}; +gsap.utils.checkPrefix = _checkPropPrefix; +gsap.core.getStyleSaver = _getStyleSaver; + +(function (positionAndScale, rotation, others, aliases) { + var all = _forEachName(positionAndScale + "," + rotation + "," + others, function (name) { + _transformProps[name] = 1; + }); + + _forEachName(rotation, function (name) { + _config.units[name] = "deg"; + _rotationalProperties[name] = 1; + }); + + _propertyAliases[all[13]] = positionAndScale + "," + rotation; + + _forEachName(aliases, function (name) { + var split = name.split(":"); + _propertyAliases[split[1]] = all[split[0]]; + }); +})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY"); + +_forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) { + _config.units[name] = "px"; +}); + +gsap.registerPlugin(CSSPlugin); +export { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix }; \ No newline at end of file diff --git a/gsap-public/esm/CSSRulePlugin.js b/gsap-public/esm/CSSRulePlugin.js new file mode 100644 index 0000000..629d362 --- /dev/null +++ b/gsap-public/esm/CSSRulePlugin.js @@ -0,0 +1,134 @@ +/*! + * CSSRulePlugin 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, GreenSock. All rights reserved. + * Subject to the terms at https://greensock.com/standard-license or for + * Club GreenSock members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com +*/ + +/* eslint-disable */ +var gsap, + _coreInitted, + _win, + _doc, + CSSPlugin, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _getGSAP = function _getGSAP() { + return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _checkRegister = function _checkRegister() { + if (!_coreInitted) { + _initCore(); + + if (!CSSPlugin) { + console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)"); + } + } + + return _coreInitted; +}, + _initCore = function _initCore(core) { + gsap = core || _getGSAP(); + + if (_windowExists()) { + _win = window; + _doc = document; + } + + if (gsap) { + CSSPlugin = gsap.plugins.css; + + if (CSSPlugin) { + _coreInitted = 1; + } + } +}; + +export var CSSRulePlugin = { + version: "3.11.5", + name: "cssRule", + init: function init(target, value, tween, index, targets) { + if (!_checkRegister() || typeof target.cssText === "undefined") { + return false; + } + + var div = target._gsProxy = target._gsProxy || _doc.createElement("div"); + + this.ss = target; + this.style = div.style; + div.style.cssText = target.cssText; + CSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both + }, + render: function render(ratio, data) { + var pt = data._pt, + style = data.style, + ss = data.ss, + i; + + while (pt) { + pt.r(ratio, pt.d); + pt = pt._next; + } + + i = style.length; + + while (--i > -1) { + ss[style[i]] = style[style[i]]; + } + }, + getRule: function getRule(selector) { + _checkRegister(); + + var ruleProp = _doc.all ? "rules" : "cssRules", + styleSheets = _doc.styleSheets, + i = styleSheets.length, + pseudo = selector.charAt(0) === ":", + j, + curSS, + cs, + a; + selector = (pseudo ? "" : ",") + selector.split("::").join(":").toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. + + if (pseudo) { + a = []; + } + + while (i--) { + //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. + try { + curSS = styleSheets[i][ruleProp]; + + if (!curSS) { + continue; + } + + j = curSS.length; + } catch (e) { + console.warn(e); + continue; + } + + while (--j > -1) { + cs = curSS[j]; + + if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { + //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. + if (pseudo) { + a.push(cs.style); + } else { + return cs.style; + } + } + } + } + + return a; + }, + register: _initCore +}; +_getGSAP() && gsap.registerPlugin(CSSRulePlugin); +export { CSSRulePlugin as default }; \ No newline at end of file diff --git a/gsap-public/esm/CustomEase.js b/gsap-public/esm/CustomEase.js new file mode 100644 index 0000000..2d3c6fc --- /dev/null +++ b/gsap-public/esm/CustomEase.js @@ -0,0 +1,371 @@ +/*! + * CustomEase 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, GreenSock. All rights reserved. + * Subject to the terms at https://greensock.com/standard-license or for + * Club GreenSock members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com +*/ + +/* eslint-disable */ +import { stringToRawPath, rawPathToString, transformRawPath } from "./utils/paths.js"; + +var gsap, + _coreInitted, + _getGSAP = function _getGSAP() { + return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _initCore = function _initCore() { + gsap = _getGSAP(); + + if (gsap) { + gsap.registerEase("_CE", CustomEase.create); + _coreInitted = 1; + } else { + console.warn("Please gsap.registerPlugin(CustomEase)"); + } +}, + _bigNum = 1e20, + _round = function _round(value) { + return ~~(value * 1000 + (value < 0 ? -.5 : .5)) / 1000; +}, + _bonusValidated = 1, + //CustomEase +_numExp = /[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi, + //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8. +_needsParsingExp = /[cLlsSaAhHvVtTqQ]/g, + _findMinimum = function _findMinimum(values) { + var l = values.length, + min = _bigNum, + i; + + for (i = 1; i < l; i += 6) { + +values[i] < min && (min = +values[i]); + } + + return min; +}, + //takes all the points and translates/scales them so that the x starts at 0 and ends at 1. +_normalize = function _normalize(values, height, originY) { + if (!originY && originY !== 0) { + originY = Math.max(+values[values.length - 1], +values[1]); + } + + var tx = +values[0] * -1, + ty = -originY, + l = values.length, + sx = 1 / (+values[l - 2] + tx), + sy = -height || (Math.abs(+values[l - 1] - +values[1]) < 0.01 * (+values[l - 2] - +values[0]) ? _findMinimum(values) + ty : +values[l - 1] + ty), + i; + + if (sy) { + //typically y ends at 1 (so that the end values are reached) + sy = 1 / sy; + } else { + //in case the ease returns to its beginning value, scale everything proportionally + sy = -sx; + } + + for (i = 0; i < l; i += 2) { + values[i] = (+values[i] + tx) * sx; + values[i + 1] = (+values[i + 1] + ty) * sy; + } +}, + //note that this function returns point objects like {x, y} rather than working with segments which are arrays with alternating x, y values as in the similar function in paths.js +_bezierToPoints = function _bezierToPoints(x1, y1, x2, y2, x3, y3, x4, y4, threshold, points, index) { + var x12 = (x1 + x2) / 2, + y12 = (y1 + y2) / 2, + x23 = (x2 + x3) / 2, + y23 = (y2 + y3) / 2, + x34 = (x3 + x4) / 2, + y34 = (y3 + y4) / 2, + x123 = (x12 + x23) / 2, + y123 = (y12 + y23) / 2, + x234 = (x23 + x34) / 2, + y234 = (y23 + y34) / 2, + x1234 = (x123 + x234) / 2, + y1234 = (y123 + y234) / 2, + dx = x4 - x1, + dy = y4 - y1, + d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx), + d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx), + length; + + if (!points) { + points = [{ + x: x1, + y: y1 + }, { + x: x4, + y: y4 + }]; + index = 1; + } + + points.splice(index || points.length - 1, 0, { + x: x1234, + y: y1234 + }); + + if ((d2 + d3) * (d2 + d3) > threshold * (dx * dx + dy * dy)) { + length = points.length; + + _bezierToPoints(x1, y1, x12, y12, x123, y123, x1234, y1234, threshold, points, index); + + _bezierToPoints(x1234, y1234, x234, y234, x34, y34, x4, y4, threshold, points, index + 1 + (points.length - length)); + } + + return points; +}; + +export var CustomEase = /*#__PURE__*/function () { + function CustomEase(id, data, config) { + _coreInitted || _initCore(); + this.id = id; + _bonusValidated && this.setData(data, config); + } + + var _proto = CustomEase.prototype; + + _proto.setData = function setData(data, config) { + config = config || {}; + data = data || "0,0,1,1"; + var values = data.match(_numExp), + closest = 1, + points = [], + lookup = [], + precision = config.precision || 1, + fast = precision <= 1, + l, + a1, + a2, + i, + inc, + j, + point, + prevPoint, + p; + this.data = data; + + if (_needsParsingExp.test(data) || ~data.indexOf("M") && data.indexOf("C") < 0) { + values = stringToRawPath(data)[0]; + } + + l = values.length; + + if (l === 4) { + values.unshift(0, 0); + values.push(1, 1); + l = 8; + } else if ((l - 2) % 6) { + throw "Invalid CustomEase"; + } + + if (+values[0] !== 0 || +values[l - 2] !== 1) { + _normalize(values, config.height, config.originY); + } + + this.segment = values; + + for (i = 2; i < l; i += 6) { + a1 = { + x: +values[i - 2], + y: +values[i - 1] + }; + a2 = { + x: +values[i + 4], + y: +values[i + 5] + }; + points.push(a1, a2); + + _bezierToPoints(a1.x, a1.y, +values[i], +values[i + 1], +values[i + 2], +values[i + 3], a2.x, a2.y, 1 / (precision * 200000), points, points.length - 1); + } + + l = points.length; + + for (i = 0; i < l; i++) { + point = points[i]; + prevPoint = points[i - 1] || point; + + if ((point.x > prevPoint.x || prevPoint.y !== point.y && prevPoint.x === point.x || point === prevPoint) && point.x <= 1) { + //if a point goes BACKWARD in time or is a duplicate, just drop it. Also it shouldn't go past 1 on the x axis, as could happen in a string like "M0,0 C0,0 0.12,0.68 0.18,0.788 0.195,0.845 0.308,1 0.32,1 0.403,1.005 0.398,1 0.5,1 0.602,1 0.816,1.005 0.9,1 0.91,1 0.948,0.69 0.962,0.615 1.003,0.376 1,0 1,0". + prevPoint.cx = point.x - prevPoint.x; //change in x between this point and the next point (performance optimization) + + prevPoint.cy = point.y - prevPoint.y; + prevPoint.n = point; + prevPoint.nx = point.x; //next point's x value (performance optimization, making lookups faster in getRatio()). Remember, the lookup will always land on a spot where it's either this point or the very next one (never beyond that) + + if (fast && i > 1 && Math.abs(prevPoint.cy / prevPoint.cx - points[i - 2].cy / points[i - 2].cx) > 2) { + //if there's a sudden change in direction, prioritize accuracy over speed. Like a bounce ease - you don't want to risk the sampling chunks landing on each side of the bounce anchor and having it clipped off. + fast = 0; + } + + if (prevPoint.cx < closest) { + if (!prevPoint.cx) { + prevPoint.cx = 0.001; //avoids math problems in getRatio() (dividing by zero) + + if (i === l - 1) { + //in case the final segment goes vertical RIGHT at the end, make sure we end at the end. + prevPoint.x -= 0.001; + closest = Math.min(closest, 0.001); + fast = 0; + } + } else { + closest = prevPoint.cx; + } + } + } else { + points.splice(i--, 1); + l--; + } + } + + l = 1 / closest + 1 | 0; + inc = 1 / l; + j = 0; + point = points[0]; + + if (fast) { + for (i = 0; i < l; i++) { + //for fastest lookups, we just sample along the path at equal x (time) distance. Uses more memory and is slightly less accurate for anchors that don't land on the sampling points, but for the vast majority of eases it's excellent (and fast). + p = i * inc; + + if (point.nx < p) { + point = points[++j]; + } + + a1 = point.y + (p - point.x) / point.cx * point.cy; + lookup[i] = { + x: p, + cx: inc, + y: a1, + cy: 0, + nx: 9 + }; + + if (i) { + lookup[i - 1].cy = a1 - lookup[i - 1].y; + } + } + + lookup[l - 1].cy = points[points.length - 1].y - a1; + } else { + //this option is more accurate, ensuring that EVERY anchor is hit perfectly. Clipping across a bounce, for example, would never happen. + for (i = 0; i < l; i++) { + //build a lookup table based on the smallest distance so that we can instantly find the appropriate point (well, it'll either be that point or the very next one). We'll look up based on the linear progress. So it's it's 0.5 and the lookup table has 100 elements, it'd be like lookup[Math.floor(0.5 * 100)] + if (point.nx < i * inc) { + point = points[++j]; + } + + lookup[i] = point; + } + + if (j < points.length - 1) { + lookup[i - 1] = points[points.length - 2]; + } + } //this._calcEnd = (points[points.length-1].y !== 1 || points[0].y !== 0); //ensures that we don't run into floating point errors. As long as we're starting at 0 and ending at 1, tell GSAP to skip the final calculation and use 0/1 as the factor. + + + this.ease = function (p) { + var point = lookup[p * l | 0] || lookup[l - 1]; + + if (point.nx < p) { + point = point.n; + } + + return point.y + (p - point.x) / point.cx * point.cy; + }; + + this.ease.custom = this; + this.id && gsap && gsap.registerEase(this.id, this.ease); + return this; + }; + + _proto.getSVGData = function getSVGData(config) { + return CustomEase.getSVGData(this, config); + }; + + CustomEase.create = function create(id, data, config) { + return new CustomEase(id, data, config).ease; + }; + + CustomEase.register = function register(core) { + gsap = core; + + _initCore(); + }; + + CustomEase.get = function get(id) { + return gsap.parseEase(id); + }; + + CustomEase.getSVGData = function getSVGData(ease, config) { + config = config || {}; + var width = config.width || 100, + height = config.height || 100, + x = config.x || 0, + y = (config.y || 0) + height, + e = gsap.utils.toArray(config.path)[0], + a, + slope, + i, + inc, + tx, + ty, + precision, + threshold, + prevX, + prevY; + + if (config.invert) { + height = -height; + y = 0; + } + + if (typeof ease === "string") { + ease = gsap.parseEase(ease); + } + + if (ease.custom) { + ease = ease.custom; + } + + if (ease instanceof CustomEase) { + a = rawPathToString(transformRawPath([ease.segment], width, 0, 0, -height, x, y)); + } else { + a = [x, y]; + precision = Math.max(5, (config.precision || 1) * 200); + inc = 1 / precision; + precision += 2; + threshold = 5 / precision; + prevX = _round(x + inc * width); + prevY = _round(y + ease(inc) * -height); + slope = (prevY - y) / (prevX - x); + + for (i = 2; i < precision; i++) { + tx = _round(x + i * inc * width); + ty = _round(y + ease(i * inc) * -height); + + if (Math.abs((ty - prevY) / (tx - prevX) - slope) > threshold || i === precision - 1) { + //only add points when the slope changes beyond the threshold + a.push(prevX, prevY); + slope = (ty - prevY) / (tx - prevX); + } + + prevX = tx; + prevY = ty; + } + + a = "M" + a.join(","); + } + + e && e.setAttribute("d", a); + return a; + }; + + return CustomEase; +}(); +_getGSAP() && gsap.registerPlugin(CustomEase); +CustomEase.version = "3.11.5"; +export { CustomEase as default }; \ No newline at end of file diff --git a/gsap-public/esm/Draggable.js b/gsap-public/esm/Draggable.js new file mode 100644 index 0000000..954df93 --- /dev/null +++ b/gsap-public/esm/Draggable.js @@ -0,0 +1,2693 @@ +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +/*! + * Draggable 3.11.5 + * https://greensock.com + * + * @license Copyright 2008-2023, GreenSock. All rights reserved. + * Subject to the terms at https://greensock.com/standard-license or for + * Club GreenSock members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com + */ + +/* eslint-disable */ +import { getGlobalMatrix, Matrix2D } from "./utils/matrix.js"; + +var gsap, + _win, + _doc, + _docElement, + _body, + _tempDiv, + _placeholderDiv, + _coreInitted, + _checkPrefix, + _toArray, + _supportsPassive, + _isTouchDevice, + _touchEventLookup, + _isMultiTouching, + _isAndroid, + InertiaPlugin, + _defaultCursor, + _supportsPointer, + _context, + _getStyleSaver, + _dragCount = 0, + _windowExists = function _windowExists() { + return typeof window !== "undefined"; +}, + _getGSAP = function _getGSAP() { + return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap; +}, + _isFunction = function _isFunction(value) { + return typeof value === "function"; +}, + _isObject = function _isObject(value) { + return typeof value === "object"; +}, + _isUndefined = function _isUndefined(value) { + return typeof value === "undefined"; +}, + _emptyFunc = function _emptyFunc() { + return false; +}, + _transformProp = "transform", + _transformOriginProp = "transformOrigin", + _round = function _round(value) { + return Math.round(value * 10000) / 10000; +}, + _isArray = Array.isArray, + _createElement = function _createElement(type, ns) { + var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible. + + return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/). +}, + _RAD2DEG = 180 / Math.PI, + _bigNum = 1e20, + _identityMatrix = new Matrix2D(), + _getTime = Date.now || function () { + return new Date().getTime(); +}, + _renderQueue = [], + _lookup = {}, + //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems. +_lookupCount = 0, + _clickableTagExp = /^(?:a|input|textarea|button|select)$/i, + _lastDragTime = 0, + _temp1 = {}, + // a simple object we reuse and populate (usually x/y properties) to conserve memory and improve performance. +_windowProxy = {}, + //memory/performance optimization - we reuse this object during autoScroll to store window-related bounds/offsets. +_copy = function _copy(obj, factor) { + var copy = {}, + p; + + for (p in obj) { + copy[p] = factor ? obj[p] * factor : obj[p]; + } + + return copy; +}, + _extend = function _extend(obj, defaults) { + for (var p in defaults) { + if (!(p in obj)) { + obj[p] = defaults[p]; + } + } + + return obj; +}, + _setTouchActionForAllDescendants = function _setTouchActionForAllDescendants(elements, value) { + var i = elements.length, + children; + + while (i--) { + value ? elements[i].style.touchAction = value : elements[i].style.removeProperty("touch-action"); + children = elements[i].children; + children && children.length && _setTouchActionForAllDescendants(children, value); + } +}, + _renderQueueTick = function _renderQueueTick() { + return _renderQueue.forEach(function (func) { + return func(); + }); +}, + _addToRenderQueue = function _addToRenderQueue(func) { + _renderQueue.push(func); + + if (_renderQueue.length === 1) { + gsap.ticker.add(_renderQueueTick); + } +}, + _renderQueueTimeout = function _renderQueueTimeout() { + return !_renderQueue.length && gsap.ticker.remove(_renderQueueTick); +}, + _removeFromRenderQueue = function _removeFromRenderQueue(func) { + var i = _renderQueue.length; + + while (i--) { + if (_renderQueue[i] === func) { + _renderQueue.splice(i, 1); + } + } + + gsap.to(_renderQueueTimeout, { + overwrite: true, + delay: 15, + duration: 0, + onComplete: _renderQueueTimeout, + data: "_draggable" + }); //remove the "tick" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices). +}, + _setDefaults = function _setDefaults(obj, defaults) { + for (var p in defaults) { + if (!(p in obj)) { + obj[p] = defaults[p]; + } + } + + return obj; +}, + _addListener = function _addListener(element, type, func, capture) { + if (element.addEventListener) { + var touchType = _touchEventLookup[type]; + capture = capture || (_supportsPassive ? { + passive: false + } : null); + element.addEventListener(touchType || type, func, capture); + touchType && type !== touchType && element.addEventListener(type, func, capture); //some browsers actually support both, so must we. But pointer events cover all. + } +}, + _removeListener = function _removeListener(element, type, func, capture) { + if (element.removeEventListener) { + var touchType = _touchEventLookup[type]; + element.removeEventListener(touchType || type, func, capture); + touchType && type !== touchType && element.removeEventListener(type, func, capture); + } +}, + _preventDefault = function _preventDefault(event) { + event.preventDefault && event.preventDefault(); + event.preventManipulation && event.preventManipulation(); //for some Microsoft browsers +}, + _hasTouchID = function _hasTouchID(list, ID) { + var i = list.length; + + while (i--) { + if (list[i].identifier === ID) { + return true; + } + } +}, + _onMultiTouchDocumentEnd = function _onMultiTouchDocumentEnd(event) { + _isMultiTouching = event.touches && _dragCount < event.touches.length; + + _removeListener(event.target, "touchend", _onMultiTouchDocumentEnd); +}, + _onMultiTouchDocument = function _onMultiTouchDocument(event) { + _isMultiTouching = event.touches && _dragCount < event.touches.length; + + _addListener(event.target, "touchend", _onMultiTouchDocumentEnd); +}, + _getDocScrollTop = function _getDocScrollTop(doc) { + return _win.pageYOffset || doc.scrollTop || doc.documentElement.scrollTop || doc.body.scrollTop || 0; +}, + _getDocScrollLeft = function _getDocScrollLeft(doc) { + return _win.pageXOffset || doc.scrollLeft || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0; +}, + _addScrollListener = function _addScrollListener(e, callback) { + _addListener(e, "scroll", callback); + + if (!_isRoot(e.parentNode)) { + _addScrollListener(e.parentNode, callback); + } +}, + _removeScrollListener = function _removeScrollListener(e, callback) { + _removeListener(e, "scroll", callback); + + if (!_isRoot(e.parentNode)) { + _removeScrollListener(e.parentNode, callback); + } +}, + _isRoot = function _isRoot(e) { + return !!(!e || e === _docElement || e.nodeType === 9 || e === _doc.body || e === _win || !e.nodeType || !e.parentNode); +}, + _getMaxScroll = function _getMaxScroll(element, axis) { + var dim = axis === "x" ? "Width" : "Height", + scroll = "scroll" + dim, + client = "client" + dim; + return Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], _body[scroll]) - (_win["inner" + dim] || _docElement[client] || _body[client]) : element[scroll] - element[client]); +}, + _recordMaxScrolls = function _recordMaxScrolls(e, skipCurrent) { + //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll. + var x = _getMaxScroll(e, "x"), + y = _getMaxScroll(e, "y"); + + if (_isRoot(e)) { + e = _windowProxy; + } else { + _recordMaxScrolls(e.parentNode, skipCurrent); + } + + e._gsMaxScrollX = x; + e._gsMaxScrollY = y; + + if (!skipCurrent) { + e._gsScrollX = e.scrollLeft || 0; + e._gsScrollY = e.scrollTop || 0; + } +}, + _setStyle = function _setStyle(element, property, value) { + var style = element.style; + + if (!style) { + return; + } + + if (_isUndefined(style[property])) { + property = _checkPrefix(property, element) || property; + } + + if (value == null) { + style.removeProperty && style.removeProperty(property.replace(/([A-Z])/g, "-$1").toLowerCase()); + } else { + style[property] = value; + } +}, + _getComputedStyle = function _getComputedStyle(element) { + return _win.getComputedStyle(element instanceof Element ? element : element.host || (element.parentNode || {}).host || element); +}, + //the "host" stuff helps to accommodate ShadowDom objects. +_tempRect = {}, + //reuse to reduce garbage collection tasks +_parseRect = function _parseRect(e) { + //accepts a DOM element, a mouse event, or a rectangle object and returns the corresponding rectangle with left, right, width, height, top, and bottom properties + if (e === _win) { + _tempRect.left = _tempRect.top = 0; + _tempRect.width = _tempRect.right = _docElement.clientWidth || e.innerWidth || _body.clientWidth || 0; + _tempRect.height = _tempRect.bottom = (e.innerHeight || 0) - 20 < _docElement.clientHeight ? _docElement.clientHeight : e.innerHeight || _body.clientHeight || 0; + return _tempRect; + } + + var doc = e.ownerDocument || _doc, + r = !_isUndefined(e.pageX) ? { + left: e.pageX - _getDocScrollLeft(doc), + top: e.pageY - _getDocScrollTop(doc), + right: e.pageX - _getDocScrollLeft(doc) + 1, + bottom: e.pageY - _getDocScrollTop(doc) + 1 + } : !e.nodeType && !_isUndefined(e.left) && !_isUndefined(e.top) ? e : _toArray(e)[0].getBoundingClientRect(); + + if (_isUndefined(r.right) && !_isUndefined(r.width)) { + r.right = r.left + r.width; + r.bottom = r.top + r.height; + } else if (_isUndefined(r.width)) { + //some browsers don't include width and height properties. We can't just set them directly on r because some browsers throw errors, so create a new generic object. + r = { + width: r.right - r.left, + height: r.bottom - r.top, + right: r.right, + left: r.left, + bottom: r.bottom, + top: r.top + }; + } + + return r; +}, + _dispatchEvent = function _dispatchEvent(target, type, callbackName) { + var vars = target.vars, + callback = vars[callbackName], + listeners = target._listeners[type], + result; + + if (_isFunction(callback)) { + result = callback.apply(vars.callbackScope || target, vars[callbackName + "Params"] || [target.pointerEvent]); + } + + if (listeners && target.dispatchEvent(type) === false) { + result = false; + } + + return result; +}, + _getBounds = function _getBounds(target, context) { + //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties. + var e = _toArray(target)[0], + top, + left, + offset; + + if (!e.nodeType && e !== _win) { + if (!_isUndefined(target.left)) { + offset = { + x: 0, + y: 0 + }; //_getOffsetTransformOrigin(context); //the bounds should be relative to the origin + + return { + left: target.left - offset.x, + top: target.top - offset.y, + width: target.width, + height: target.height + }; + } + + left = target.min || target.minX || target.minRotation || 0; + top = target.min || target.minY || 0; + return { + left: left, + top: top, + width: (target.max || target.maxX || target.maxRotation || 0) - left, + height: (target.max || target.maxY || 0) - top + }; + } + + return _getElementBounds(e, context); +}, + _point1 = {}, + //we reuse to minimize garbage collection tasks. +_getElementBounds = function _getElementBounds(element, context) { + context = _toArray(context)[0]; + var isSVG = element.getBBox && element.ownerSVGElement, + doc = element.ownerDocument || _doc, + left, + right, + top, + bottom, + matrix, + p1, + p2, + p3, + p4, + bbox, + width, + height, + cs; + + if (element === _win) { + top = _getDocScrollTop(doc); + left = _getDocScrollLeft(doc); + right = left + (doc.documentElement.clientWidth || element.innerWidth || doc.body.clientWidth || 0); + bottom = top + ((element.innerHeight || 0) - 20 < doc.documentElement.clientHeight ? doc.documentElement.clientHeight : element.innerHeight || doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this. + } else if (context === _win || _isUndefined(context)) { + return element.getBoundingClientRect(); + } else { + left = top = 0; + + if (isSVG) { + bbox = element.getBBox(); + width = bbox.width; + height = bbox.height; + } else { + if (element.viewBox && (bbox = element.viewBox.baseVal)) { + left = bbox.x || 0; + top = bbox.y || 0; + width = bbox.width; + height = bbox.height; + } + + if (!width) { + cs = _getComputedStyle(element); + bbox = cs.boxSizing === "border-box"; + width = (parseFloat(cs.width) || element.clientWidth || 0) + (bbox ? 0 : parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)); + height = (parseFloat(cs.height) || element.clientHeight || 0) + (bbox ? 0 : parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)); + } + } + + right = width; + bottom = height; + } + + if (element === context) { + return { + left: left, + top: top, + width: right - left, + height: bottom - top + }; + } + + matrix = getGlobalMatrix(context, true).multiply(getGlobalMatrix(element)); + p1 = matrix.apply({ + x: left, + y: top + }); + p2 = matrix.apply({ + x: right, + y: top + }); + p3 = matrix.apply({ + x: right, + y: bottom + }); + p4 = matrix.apply({ + x: left, + y: bottom + }); + left = Math.min(p1.x, p2.x, p3.x, p4.x); + top = Math.min(p1.y, p2.y, p3.y, p4.y); + return { + left: left, + top: top, + width: Math.max(p1.x, p2.x, p3.x, p4.x) - left, + height: Math.max(p1.y, p2.y, p3.y, p4.y) - top + }; +}, + _parseInertia = function _parseInertia(draggable, snap, max, min, factor, forceZeroVelocity) { + var vars = {}, + a, + i, + l; + + if (snap) { + if (factor !== 1 && snap instanceof Array) { + //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values. + vars.end = a = []; + l = snap.length; + + if (_isObject(snap[0])) { + //if the array is populated with objects, like points ({x:100, y:200}), make copies before multiplying by the factor, otherwise we'll mess up the originals and the user may reuse it elsewhere. + for (i = 0; i < l; i++) { + a[i] = _copy(snap[i], factor); + } + } else { + for (i = 0; i < l; i++) { + a[i] = snap[i] * factor; + } + } + + max += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if "snap:[-$('#menu').width(), 0]" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum. + + min -= 1.1; + } else if (_isFunction(snap)) { + vars.end = function (value) { + var result = snap.call(draggable, value), + copy, + p; + + if (factor !== 1) { + if (_isObject(result)) { + copy = {}; + + for (p in result) { + copy[p] = result[p] * factor; + } + + result = copy; + } else { + result *= factor; + } + } + + return result; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function. + }; + } else { + vars.end = snap; + } + } + + if (max || max === 0) { + vars.max = max; + } + + if (min || min === 0) { + vars.min = min; + } + + if (forceZeroVelocity) { + vars.velocity = 0; + } + + return vars; +}, + _isClickable = function _isClickable(element) { + //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an , , or