Merge branch 'main' into update-emotion-is-valid-prop

motiondivision · Mar 12, 2024 · 9767415 · 9767415
2 parents c30a327 + c2454f1
commit 9767415
Show file tree

Hide file tree

Showing 166 changed files with 2,888 additions and 2,298 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,8 +7,14 @@
         },
         "useJSXTextNode": true
     },
-    "plugins": ["@typescript-eslint", "react", "react-hooks", "import"],
-    "extends": ["prettier"],
+    "plugins": [
+        "@typescript-eslint",
+        "react",
+        "react-hooks",
+        "import",
+        "redos-detector"
+    ],
+    "extends": ["prettier", "plugin:regexp/recommended"],
     "rules": {
         "@typescript-eslint/no-unused-vars": "warn",
         "@typescript-eslint/type-annotation-spacing": "error",
@@ -31,6 +37,38 @@
         // "react-this-binding-issue": 1,
         // "react-unused-props-and-state": 1,
         // "variable-name": [1, "ban-keywords"]
-        "use-isnan": "error"
+        "use-isnan": "error",
+
+        // Regexp
+        // Regexp security
+        "redos-detector/no-unsafe-regex": ["error", { "ignoreError": true }], // Prevent DoS regexps
+        "regexp/no-super-linear-move": "error",
+
+        // Auto optimize regexps
+        "regexp/no-non-standard-flag": "warn",
+        "regexp/no-control-character": "error",
+        "regexp/no-contradiction-with-assertion": "error",
+        "regexp/no-octal": "warn",
+        "regexp/no-standalone-backslash": "error",
+        "regexp/prefer-escape-replacement-dollar-char": "error",
+        "regexp/prefer-quantifier": "error",
+        "regexp/hexadecimal-escape": ["error", "always"],
+        "regexp/prefer-lookaround": "error",
+        "regexp/prefer-unicode-codepoint-escapes": "warn",
+        "regexp/grapheme-string-literal": "error",
+        "regexp/no-unused-capturing-group": [
+            "error",
+            {
+                "fixable": true,
+                "allowNamed": true
+            }
+        ],
+
+        // regex perf
+        "regexp/prefer-question-quantifier": "off", // `(?:a|b|)` is faster than (?:a|b)?
+        "regexp/no-empty-alternative": "off", // see above
+        "regexp/require-unicode-regexp": "warn", // /u flag is faster and enables regexp strict mode
+        "@typescript-eslint/prefer-regexp-exec": "off",
+        "regexp/prefer-regexp-exec": "error" // exec is faster than match
     }
 }
diff --git a/.yarn/cache/@aashutoshrathi-word-wrap-npm-1.2.6-5b1d95e487-ada901b9e7.zip b/.yarn/cache/@aashutoshrathi-word-wrap-npm-1.2.6-5b1d95e487-ada901b9e7.zip
diff --git a/.yarn/cache/@babel-code-frame-npm-7.18.6-25229a7e34-195e2be317.zip b/.yarn/cache/@babel-code-frame-npm-7.18.6-25229a7e34-195e2be317.zip
diff --git a/.yarn/cache/@babel-generator-npm-7.18.12-280dfc3ba1-07dd71d255.zip b/.yarn/cache/@babel-generator-npm-7.18.12-280dfc3ba1-07dd71d255.zip
diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.18.9-9f5b3635a1-b25101f616.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.18.9-9f5b3635a1-b25101f616.zip
diff --git a/.yarn/cache/@babel-helper-function-name-npm-7.18.9-89df62ccc8-d04c44e027.zip b/.yarn/cache/@babel-helper-function-name-npm-7.18.9-89df62ccc8-d04c44e027.zip
diff --git a/.yarn/cache/@babel-helper-hoist-variables-npm-7.18.6-6eb061f405-fd9c35bb43.zip b/.yarn/cache/@babel-helper-hoist-variables-npm-7.18.6-6eb061f405-fd9c35bb43.zip
diff --git a/.yarn/cache/@babel-helper-split-export-declaration-npm-7.18.6-53ebf8ad4c-c6d3dede53.zip b/.yarn/cache/@babel-helper-split-export-declaration-npm-7.18.6-53ebf8ad4c-c6d3dede53.zip
diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.18.10-cf6fe67f9a-d554a43933.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.18.10-cf6fe67f9a-d554a43933.zip
diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.18.6-357e4653ab-e295254d61.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.18.6-357e4653ab-e295254d61.zip
diff --git a/.yarn/cache/@babel-highlight-npm-7.18.6-9d35ad2e27-92d8ee6154.zip b/.yarn/cache/@babel-highlight-npm-7.18.6-9d35ad2e27-92d8ee6154.zip
diff --git a/.yarn/cache/@babel-parser-npm-7.18.11-a2b80029aa-5ecc75b83e.zip b/.yarn/cache/@babel-parser-npm-7.18.11-a2b80029aa-5ecc75b83e.zip
diff --git a/.yarn/cache/@babel-template-npm-7.18.10-b6d6fdbaf8-93a6aa094a.zip b/.yarn/cache/@babel-template-npm-7.18.10-b6d6fdbaf8-93a6aa094a.zip
diff --git a/.yarn/cache/@babel-types-npm-7.18.10-8502ea016c-11632c9b10.zip b/.yarn/cache/@babel-types-npm-7.18.10-8502ea016c-11632c9b10.zip
diff --git a/.yarn/cache/@eslint-community-eslint-utils-npm-4.4.0-d1791bd5a3-cdfe3ae42b.zip b/.yarn/cache/@eslint-community-eslint-utils-npm-4.4.0-d1791bd5a3-cdfe3ae42b.zip
diff --git a/.yarn/cache/@eslint-community-regexpp-npm-4.10.0-6bfb984c81-2a6e345429.zip b/.yarn/cache/@eslint-community-regexpp-npm-4.10.0-6bfb984c81-2a6e345429.zip
diff --git a/.yarn/cache/@eslint-eslintrc-npm-1.3.0-1f3c51be25-a1e734ad31.zip b/.yarn/cache/@eslint-eslintrc-npm-1.3.0-1f3c51be25-a1e734ad31.zip
diff --git a/.yarn/cache/@eslint-eslintrc-npm-2.1.4-1ff4b5f908-10957c7592.zip b/.yarn/cache/@eslint-eslintrc-npm-2.1.4-1ff4b5f908-10957c7592.zip
diff --git a/.yarn/cache/@eslint-js-npm-8.57.0-00ead3710a-315dc65b0e.zip b/.yarn/cache/@eslint-js-npm-8.57.0-00ead3710a-315dc65b0e.zip
diff --git a/.yarn/cache/@humanwhocodes-config-array-npm-0.10.4-8334b3c6a2-d480e5d57e.zip b/.yarn/cache/@humanwhocodes-config-array-npm-0.10.4-8334b3c6a2-d480e5d57e.zip
diff --git a/.yarn/cache/@humanwhocodes-config-array-npm-0.11.14-94a02fcc87-861ccce9ea.zip b/.yarn/cache/@humanwhocodes-config-array-npm-0.11.14-94a02fcc87-861ccce9ea.zip
diff --git a/.yarn/cache/@humanwhocodes-gitignore-to-minimatch-npm-1.0.2-247ae8a408-aba5c40c9e.zip b/.yarn/cache/@humanwhocodes-gitignore-to-minimatch-npm-1.0.2-247ae8a408-aba5c40c9e.zip
diff --git a/.yarn/cache/@humanwhocodes-module-importer-npm-1.0.1-9d07ed2e4a-0fd22007db.zip b/.yarn/cache/@humanwhocodes-module-importer-npm-1.0.1-9d07ed2e4a-0fd22007db.zip
diff --git a/.yarn/cache/@humanwhocodes-object-schema-npm-1.2.1-eb622b5d0e-a824a1ec31.zip b/.yarn/cache/@humanwhocodes-object-schema-npm-1.2.1-eb622b5d0e-a824a1ec31.zip
diff --git a/.yarn/cache/@humanwhocodes-object-schema-npm-2.0.2-77b42018f9-2fc1150336.zip b/.yarn/cache/@humanwhocodes-object-schema-npm-2.0.2-77b42018f9-2fc1150336.zip
diff --git a/.yarn/cache/@jridgewell-resolve-uri-npm-3.1.0-6ff2351e61-b5ceaaf9a1.zip b/.yarn/cache/@jridgewell-resolve-uri-npm-3.1.0-6ff2351e61-b5ceaaf9a1.zip
diff --git a/.yarn/cache/@jridgewell-sourcemap-codec-npm-1.4.14-f5f0630788-61100637b6.zip b/.yarn/cache/@jridgewell-sourcemap-codec-npm-1.4.14-f5f0630788-61100637b6.zip
diff --git a/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.15-7357dbf648-38917e9c2b.zip b/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.15-7357dbf648-38917e9c2b.zip
diff --git a/.yarn/cache/@ungap-structured-clone-npm-1.2.0-648f0b82e0-4f656b7b46.zip b/.yarn/cache/@ungap-structured-clone-npm-1.2.0-648f0b82e0-4f656b7b46.zip
diff --git a/.yarn/cache/acorn-npm-8.11.3-0d7ab48b38-76d8e7d559.zip b/.yarn/cache/acorn-npm-8.11.3-0d7ab48b38-76d8e7d559.zip
diff --git a/.yarn/cache/acorn-npm-8.8.0-9ef399ab45-7270ca82b2.zip b/.yarn/cache/acorn-npm-8.8.0-9ef399ab45-7270ca82b2.zip
diff --git a/.yarn/cache/comment-parser-npm-1.4.1-f416dc95e4-e0f6f60c51.zip b/.yarn/cache/comment-parser-npm-1.4.1-f416dc95e4-e0f6f60c51.zip
diff --git a/.yarn/cache/eslint-npm-8.22.0-bb6eeb6c80-2d84a7a220.zip b/.yarn/cache/eslint-npm-8.22.0-bb6eeb6c80-2d84a7a220.zip
diff --git a/.yarn/cache/eslint-npm-8.57.0-4286e12a3a-3a48d7ff85.zip b/.yarn/cache/eslint-npm-8.57.0-4286e12a3a-3a48d7ff85.zip
diff --git a/.yarn/cache/eslint-plugin-redos-detector-npm-2.4.0-3dae8ce005-9b47a3af47.zip b/.yarn/cache/eslint-plugin-redos-detector-npm-2.4.0-3dae8ce005-9b47a3af47.zip
diff --git a/.yarn/cache/eslint-plugin-regexp-npm-2.2.0-1d1ffb9937-cfe6870ebf.zip b/.yarn/cache/eslint-plugin-regexp-npm-2.2.0-1d1ffb9937-cfe6870ebf.zip
diff --git a/.yarn/cache/eslint-scope-npm-7.1.1-23935eb377-9f6e974ab2.zip b/.yarn/cache/eslint-scope-npm-7.1.1-23935eb377-9f6e974ab2.zip
diff --git a/.yarn/cache/eslint-scope-npm-7.2.2-53cb0df8e8-ec97dbf5fb.zip b/.yarn/cache/eslint-scope-npm-7.2.2-53cb0df8e8-ec97dbf5fb.zip
diff --git a/.yarn/cache/eslint-visitor-keys-npm-3.3.0-d329af7c8c-d59e68a7c5.zip b/.yarn/cache/eslint-visitor-keys-npm-3.3.0-d329af7c8c-d59e68a7c5.zip
diff --git a/.yarn/cache/eslint-visitor-keys-npm-3.4.3-a356ac7e46-36e9ef87fc.zip b/.yarn/cache/eslint-visitor-keys-npm-3.4.3-a356ac7e46-36e9ef87fc.zip
diff --git a/.yarn/cache/espree-npm-9.3.3-220189b4c1-33e8a36fc1.zip b/.yarn/cache/espree-npm-9.3.3-220189b4c1-33e8a36fc1.zip
diff --git a/.yarn/cache/espree-npm-9.6.1-a50722a5a9-eb8c149c7a.zip b/.yarn/cache/espree-npm-9.6.1-a50722a5a9-eb8c149c7a.zip
diff --git a/.yarn/cache/esquery-npm-1.4.0-f39408b1a7-a0807e17ab.zip b/.yarn/cache/esquery-npm-1.4.0-f39408b1a7-a0807e17ab.zip
diff --git a/.yarn/cache/esquery-npm-1.5.0-d8f8a06879-aefb0d2596.zip b/.yarn/cache/esquery-npm-1.5.0-d8f8a06879-aefb0d2596.zip
diff --git a/.yarn/cache/follow-redirects-npm-1.15.1-6b191885cd-6aa4e3e3cd.zip b/.yarn/cache/follow-redirects-npm-1.15.1-6b191885cd-6aa4e3e3cd.zip
diff --git a/.yarn/cache/globals-npm-13.17.0-a6039e7d26-fbaf4112e5.zip b/.yarn/cache/globals-npm-13.17.0-a6039e7d26-fbaf4112e5.zip
diff --git a/.yarn/cache/globals-npm-13.24.0-cc7713139c-56066ef058.zip b/.yarn/cache/globals-npm-13.24.0-cc7713139c-56066ef058.zip
diff --git a/.yarn/cache/grapheme-splitter-npm-1.0.4-648f2bf509-0c22ec54de.zip b/.yarn/cache/grapheme-splitter-npm-1.0.4-648f2bf509-0c22ec54de.zip
diff --git a/.yarn/cache/graphemer-npm-1.4.0-0627732d35-bab8f0be9b.zip b/.yarn/cache/graphemer-npm-1.4.0-0627732d35-bab8f0be9b.zip
diff --git a/.yarn/cache/is-path-inside-npm-3.0.3-2ea0ef44fd-abd50f0618.zip b/.yarn/cache/is-path-inside-npm-3.0.3-2ea0ef44fd-abd50f0618.zip
diff --git a/.yarn/cache/jsdoc-type-pratt-parser-npm-4.0.0-7b035921c4-af0629c951.zip b/.yarn/cache/jsdoc-type-pratt-parser-npm-4.0.0-7b035921c4-af0629c951.zip
diff --git a/.yarn/cache/minimist-npm-1.2.6-f4cee4b4af-d15428cd1e.zip b/.yarn/cache/minimist-npm-1.2.6-f4cee4b4af-d15428cd1e.zip
diff --git a/.yarn/cache/nan-npm-2.16.0-cac314a230-cb16937273.zip b/.yarn/cache/nan-npm-2.16.0-cac314a230-cb16937273.zip
diff --git a/.yarn/cache/optionator-npm-0.9.1-577e397aae-dbc6fa0656.zip b/.yarn/cache/optionator-npm-0.9.1-577e397aae-dbc6fa0656.zip
diff --git a/.yarn/cache/optionator-npm-0.9.3-56c3a4bf80-0928199944.zip b/.yarn/cache/optionator-npm-0.9.3-56c3a4bf80-0928199944.zip
diff --git a/.yarn/cache/readable-stream-npm-3.6.0-23a4a5eb56-d4ea81502d.zip b/.yarn/cache/readable-stream-npm-3.6.0-23a4a5eb56-d4ea81502d.zip
diff --git a/.yarn/cache/refa-npm-0.12.1-44d59a9a85-845cef5478.zip b/.yarn/cache/refa-npm-0.12.1-44d59a9a85-845cef5478.zip
diff --git a/.yarn/cache/regexp-ast-analysis-npm-0.7.1-7d7723f5b9-c1c47fea63.zip b/.yarn/cache/regexp-ast-analysis-npm-0.7.1-7d7723f5b9-c1c47fea63.zip
diff --git a/.yarn/cache/scslre-npm-0.3.0-0df1ace320-a89d4fe5db.zip b/.yarn/cache/scslre-npm-0.3.0-0df1ace320-a89d4fe5db.zip
diff --git a/.yarn/cache/v8-compile-cache-npm-2.3.0-961375f150-adb0a271ea.zip b/.yarn/cache/v8-compile-cache-npm-2.3.0-961375f150-adb0a271ea.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,27 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.0.11] 2024-03-12
+
+### Changed
+
+-   Keyframes now resolved asynchronously.
+-   External event handlers now fired synchronously.
+-   CSS variables and unit conversion now supported with >2 keyframe animations.
+-   Removed WAAPI animation of `background-color`.
+
+## [11.0.10] 2024-03-12
+
+### Fixed
+
+-   Improved speed and stability of regexes.
+
+## [11.0.9] 2024-03-12
+
+### Added
+
+-   Added support for Content Security Policy (CSP) nonces via `MotionConfig`.
+
 ## [11.0.8] 2024-02-29
 
 ### Fixed

diff --git a/dev/benchmarks/cold-start-anime.html b/dev/benchmarks/cold-start-anime.html
@@ -28,15 +28,15 @@
             }
 
             .box {
-                width: 10px;
+                width: 10%;
                 height: 100px;
                 background-color: #fff;
             }
         </style>
     </head>
     <body>
         <div class="container"></div>
-        <script src="../../node_modules/animejs/lib/anime.min.js"></script>
+        <script src="../../node_modules/animejs/lib/anime.js"></script>
         <script>
             // Create boxes
             const numBoxes = 100
@@ -45,16 +45,34 @@
                 html += `<div><div class="box"></div></div>`
             }
             document.querySelector(".container").innerHTML = html
+            const boxes = document.querySelectorAll(".box")
 
             setTimeout(() => {
-                anime({
-                    targets: ".box",
-                    rotate: 360,
-                    backgroundColor: "#f00",
-                    width: "100%",
-                    duration: 1000,
-                    easing: "linear",
-                })
+                // Cold start (read from DOM)
+                boxes.forEach((box) =>
+                    anime({
+                        targets: box,
+                        rotate: Math.random() * 360,
+                        backgroundColor: "#f00",
+                        width: Math.random() * 100 + "%",
+                        translateX: 5,
+                        duration: 1000,
+                        easing: "linear",
+                    })
+                )
+
+                setTimeout(() => {
+                    // Unit conversion
+                    boxes.forEach((box) =>
+                        anime({
+                            targets: box,
+                            width: Math.random() * 100 + "px",
+                            translateX: "50%",
+                            duration: 1000,
+                            easing: "linear",
+                        })
+                    )
+                }, 1500)
             }, 1000)
         </script>
     </body>

diff --git a/dev/benchmarks/cold-start-framer-motion.html b/dev/benchmarks/cold-start-framer-motion.html
@@ -62,7 +62,7 @@
                             x: 5,
                         },
                         {
-                            easing: "linear",
+                            ease: "linear",
                             duration: 1,
                         }
                     )
@@ -78,7 +78,7 @@
                                 x: "10%",
                             },
                             {
-                                easing: "linear",
+                                ease: "linear",
                                 duration: 1,
                             }
                         )

diff --git a/dev/benchmarks/cold-start-waapi.html b/dev/benchmarks/cold-start-waapi.html
@@ -44,20 +44,51 @@
                 html += `<div><div class="box"></div></div>`
             }
             document.querySelector(".container").innerHTML = html
+            const boxes = document.querySelectorAll(".box")
 
-            boxes.forEach((box) =>
-                box.animate(
-                    {
-                        rotate: "360deg",
-                        backgroundColor: "#f00",
-                        width: "100%",
-                    },
-                    {
-                        duration: 1000,
-                        fill: "forwards",
+            setTimeout(() => {
+                boxes.forEach((box) => {
+                    const animation = box.animate(
+                        {
+                            rotate: Math.random() * 360 + "deg",
+                            backgroundColor: "#f00",
+                            width: Math.random() * 100 + "%",
+                            translate: "5px 0",
+                        },
+                        {
+                            duration: 1000,
+                            fill: "both",
+                        }
+                    )
+                    animation.onfinish = () => {
+                        requestAnimationFrame(() => {
+                            animation.commitStyles()
+                            animation.cancel()
+                        })
                     }
-                )
-            )
+                })
+
+                setTimeout(() => {
+                    boxes.forEach((box) => {
+                        const animation = box.animate(
+                            {
+                                width: Math.random() * 100 + "px",
+                                translate: "50% 0",
+                            },
+                            {
+                                duration: 1000,
+                                fill: "both",
+                            }
+                        )
+                        animation.onfinish = () => {
+                            requestAnimationFrame(() => {
+                                animation.commitStyles()
+                                animation.cancel()
+                            })
+                        }
+                    })
+                }, 1500)
+            }, 1000)
         </script>
     </body>
 </html>
diff --git a/dev/benchmarks/warm-start-framer-motion.html b/dev/benchmarks/warm-start-framer-motion.html
@@ -0,0 +1,73 @@
+<html>
+    <!--
+    Warm Start: Framer Motion
+
+    This benchmarks warm start - when an animation library already
+    knows the initial animating values.
+
+    Run in private browsing mode to avoid browser plugins interfering with
+    benchmark.
+  -->
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            .container {
+                padding: 100px;
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .container > div {
+                width: 100px;
+                height: 100px;
+            }
+
+            .box {
+                width: 10%;
+                height: 100px;
+                background-color: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container"></div>
+
+        <script src="../../packages/framer-motion/dist/dom.js"></script>
+        <script>
+            // Create boxes
+            const numBoxes = 100
+            let html = ``
+            for (let i = 0; i < numBoxes; i++) {
+                html += `<div><div class="box"></div></div>`
+            }
+            document.querySelector(".container").innerHTML = html
+
+            const { animate } = Motion
+            const boxes = document.querySelectorAll(".box")
+
+            setTimeout(() => {
+                // Warm start
+                boxes.forEach((box) =>
+                    animate(
+                        box,
+                        {
+                            rotate: [0, Math.random() * 360],
+                            backgroundColor: ["#fff", "#f00"],
+                            width: ["0%", Math.random() * 100 + "%"],
+                            x: [0, 5],
+                        },
+                        {
+                            easing: "linear",
+                            duration: 1,
+                        }
+                    )
+                )
+            }, 1000)
+        </script>
+    </body>
+</html>
diff --git a/dev/benchmarks/warm-start-gsap.html b/dev/benchmarks/warm-start-gsap.html
@@ -0,0 +1,84 @@
+<html>
+    <!--
+    Warm Start: GSAP
+
+    This benchmarks warm start - when an animation library already knows
+    the initial values to animate.
+
+    Run in private browsing mode to avoid browser plugins interfering with
+    benchmark.
+  -->
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            .container {
+                padding: 100px;
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .container > div {
+                width: 100px;
+                height: 100px;
+            }
+
+            .box {
+                width: 10px;
+                height: 100px;
+                background-color: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container"></div>
+        <script src="../../node_modules/gsap/dist/gsap.min.js"></script>
+        <script>
+            // Create boxes
+            const numBoxes = 100
+            let html = ``
+            for (let i = 0; i < numBoxes; i++) {
+                html += `<div><div class="box"></div></div>`
+            }
+            document.querySelector(".container").innerHTML = html
+
+            const boxes = document.querySelectorAll(".box")
+
+            gsap.set(boxes, {
+                rotate: 0,
+                backgroundColor: "#fff",
+                width: "0%",
+                x: 0,
+            })
+
+            setTimeout(() => {
+                // Warm start
+                boxes.forEach((box) =>
+                    gsap.to(box, {
+                        rotate: Math.random() * 360,
+                        backgroundColor: "#f00",
+                        width: Math.random() * 100 + "%",
+                        x: 5,
+                        duration: 1,
+                    })
+                )
+
+                // setTimeout(() => {
+                //     // Unit conversion
+                //     boxes.forEach((box) =>
+                //         gsap.to(box, {
+                //             width: Math.random() * 100 + "px",
+                //             x: "50%",
+                //             duration: 1,
+                //             easing: "linear",
+                //         })
+                //     )
+                // }, 1500)
+            }, 1000)
+        </script>
+    </body>
+</html>