Updates

Author: clovisdasilvaneto

404.html

@@ -1 +1 @@
-{"polyfill":["/polyfill-fd5502421d629d1c910a.js"],"app":["/app-8a1a3778d82875d46e87.js"],"component---src-infra-docs-layout-index-js":["/component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js"],"component---src-pages-404-js":["/component---src-pages-404-js-d8595e517af05edf0b50.js"],"component---src-pages-animations-js":["/component---src-pages-animations-js-245c6531c3eee6a927ad.js"],"component---src-pages-index-js":["/component---src-pages-index-js-6f3abbedf6f852c4a676.js"]}
+{"polyfill":["/polyfill-fd5502421d629d1c910a.js"],"app":["/app-5b93088eaf1920b0ba88.js"],"component---src-infra-docs-layout-index-js":["/component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js"],"component---src-pages-404-js":["/component---src-pages-404-js-d8595e517af05edf0b50.js"],"component---src-pages-animations-js":["/component---src-pages-animations-js-245c6531c3eee6a927ad.js"],"component---src-pages-index-js":["/component---src-pages-index-js-871ee3faae4c2c70877a.js"]}

404/index.html

@@ -1 +1 @@
-{"webpackCompilationHash":"55ca28281fa9f9cadc63"}
+{"webpackCompilationHash":"94ed3f862a4c1b8f90a5"}

animations/index.html

@@ -1,5 +1,5 @@
 {
     "componentChunkName": "component---src-infra-docs-layout-index-js",
     "path": "/docs/animation-classes",
-    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Docs\",\n  \"description\": \"A detailed guide about how to use All Animation in your applications.\",\n  \"slug\": \"animation-classes\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Specials, Bounce, Perspective, Fadding entrances, Rotate, Agrecives\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Animation Classes\"), mdx(\"p\", null, \"In order to have your animation properly working you need to know which is the class name of the animation that you want to use.\"), mdx(\"p\", null, \"Bellow you can find all the class names of the animations that are inside All Animation library.\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"specials\",\n    mdxType: \"Typography\"\n  }, \"Specials\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-dance\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-journal\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-pulse\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-pulse-slow\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-jamp\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-four-rock\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"bounce\",\n    mdxType: \"Typography\"\n  }, \"Bounce\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-up-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-down-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-right-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-left-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-scale-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-jump-bounce\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"perspective\",\n    mdxType: \"Typography\"\n  }, \"Perspective\"), mdx(\"p\", null, \"For using the perspective animations, please add a parent container with a class \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a-perspective\"), \", like:\"), mdx(\"p\", null, \"These are the classes:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-right\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-up\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-down\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-left-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-flip\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-right-bounce\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"perspective\",\n    mdxType: \"Typography\"\n  }, \"Fading Entrances\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-top\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-left\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-right\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-bottom\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"rotate\",\n    mdxType: \"Typography\"\n  }, \"Rotate\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-flip-down\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-down-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-out\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"agrecives\",\n    mdxType: \"Typography\"\n  }, \"Agrecives\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flash-bang\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-bomb\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"animation-classes","topics":"Specials, Bounce, Perspective, Fadding entrances, Rotate, Agrecives","title":"Docs"}}},"pageContext":{"id":"618fff5b-edac-523e-b128-3932e57afabc","slug":"animation-classes"}},
+    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Docs\",\n  \"description\": \"A detailed guide about how to use All Animation in your applications.\",\n  \"slug\": \"animation-classes\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Specials, Bounce, Perspective, Fadding entrances, Rotate, Agrecives\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Animation Classes\"), mdx(\"p\", null, \"In order to have your animation properly working you need to know which is the class name of the animation that you want to use.\"), mdx(\"p\", null, \"Bellow you can find all the class names of the animations that are inside All Animation library.\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"specials\",\n    mdxType: \"Typography\"\n  }, \"Specials\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-dance\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-journal\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-pulse\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-pulse-slow\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-jamp\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-four-rock\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"bounce\",\n    mdxType: \"Typography\"\n  }, \"Bounce\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-up-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-down-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-right-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-enter-left-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-scale-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-jump-bounce\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"perspective\",\n    mdxType: \"Typography\"\n  }, \"Perspective\"), mdx(\"p\", null, \"For using the perspective animations, please add a parent container with a class \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a-perspective\"), \", like:\"), mdx(\"p\", null, \"These are the classes:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-right\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-up\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-three-flip-down\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-left-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-flip\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-right-bounce\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"perspective\",\n    mdxType: \"Typography\"\n  }, \"Fading Entrances\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-top\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-left\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-right\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flip-bottom\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"rotate\",\n    mdxType: \"Typography\"\n  }, \"Rotate\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-flip-down\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-down-bounce\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-rotate-out\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"agrecives\",\n    mdxType: \"Typography\"\n  }, \"Agrecives\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-flash-bang\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a-bomb\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"animation-classes","topics":"Specials, Bounce, Perspective, Fadding entrances, Rotate, Agrecives","title":"Docs"}}},"pageContext":{"id":"1f7b9d0f-7abd-569b-9839-e257b835d2f0","slug":"animation-classes"}},
     "staticQueryHashes": ["4197766145"]}

app-5b93088eaf1920b0ba88.js

@@ -1,5 +1,5 @@
 {
     "componentChunkName": "component---src-infra-docs-layout-index-js",
     "path": "/docs/docs",
-    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Docs\",\n  \"description\": \"A detailed guide about how to use All Animation in your applications.\",\n  \"slug\": \"docs\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Ways of importing, How to use it\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Docs\"), mdx(\"p\", null, \"All animation is available in NPM, so you can download it by just doing an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install all-animation\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn add all-animation\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"ways-of-importing\",\n    mdxType: \"Typography\"\n  }, \"Ways of importing\"), mdx(\"p\", null, \"Currently there are 2 ways of importing All Animation in your app. Let's take a look bellow how to do it and which one would be more appropriated to your project.\"), mdx(\"br\", null), mdx(\"h4\", null, \"Importing via CSS\"), mdx(\"p\", null, \"The first one we have already seen in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/docs/get-started\"\n  }, \"get started\"), \" page,\\nwhich is by linking the css directly in your head tag:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"yourpath/all-animation.min.css\\\" />\\n\")), mdx(\"p\", null, \"This is good for projects which does not support any scss markup, othercase, we recommend you to import it by using \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" imports -- See bellow.\"), mdx(\"br\", null), mdx(\"h4\", null, \"Importing via SCSS\"), mdx(\"p\", null, \"The second one is importing the SCSS file, in this case we assume your application is already using a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" pre-processor. So in the main \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" file of your application, you can import the All Animation scss file:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"// In your main scss file\\n@import \\\"../node_modules/all-animation/scss/main\\\"\\n\")), mdx(\"p\", null, \"In this way you're importing all the animations from All Animation, but in most of the cases you might not want to import all of them, since you might not are going to use it. \"), mdx(\"p\", null, \"That's why we also allow you to import specific animations, and it's very straight forward, in you main \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" file, you first need to import all the configuration that is needed for making All Animation library work, and them you can import the animation which you want:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"// Core all-animation dependencies, like variables and mixins\\n@import \\\"../node_modules/all-animation/scss/config/_config\\\";\\n\\n// The specific animation which you want to use\\n// in this case \\\"a-bomb\\\"\\n@import \\\"../node_modules/all-animation/scss/modules/bomb/bomb\\\"\\n\")), mdx(\"p\", null, \"And vual\\xE1! Now you are able to use the bomb animation from All Animation library \\uD83E\\uDD29\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"how-to-use-it\",\n    mdxType: \"Typography\"\n  }, \"How to use it\"), mdx(\"p\", null, \"After the library is properly linked, its very simple to use it, you just need to add the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/docs/animation-classes\"\n  }, \"All Animation class\"), \" and your element will be animated, eg:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"hey\\\">This guy is going to be animated</div>\\n<button>Animte NOOOOW</button>\\n\\n<script>\\n// Attach the click event on the button\\ndocument.querySelector(\\\"button\\\").addEventListener('click', () => {\\n    // Adds the a-bomb class on our \\\"hey\\\" element\\n    document.querySelector('.hey').classList.add('a-bomb')\\n})\\n</script>\\n\")), mdx(\"p\", null, \"This example on top, is adding an animation on our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \" element when the user clicks on our button.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"docs","topics":"Ways of importing, How to use it","title":"Docs"}}},"pageContext":{"id":"bc3bcbae-9e3b-57a2-894f-d9b16e327086","slug":"docs"}},
+    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Docs\",\n  \"description\": \"A detailed guide about how to use All Animation in your applications.\",\n  \"slug\": \"docs\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Ways of importing, How to use it\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Docs\"), mdx(\"p\", null, \"All animation is available in NPM, so you can download it by just doing an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install all-animation\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn add all-animation\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"ways-of-importing\",\n    mdxType: \"Typography\"\n  }, \"Ways of importing\"), mdx(\"p\", null, \"Currently there are 2 ways of importing All Animation in your app. Let's take a look bellow how to do it and which one would be more appropriated to your project.\"), mdx(\"br\", null), mdx(\"h4\", null, \"Importing via CSS\"), mdx(\"p\", null, \"The first one we have already seen in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/docs/get-started\"\n  }, \"get started\"), \" page,\\nwhich is by linking the css directly in your head tag:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"yourpath/all-animation.min.css\\\" />\\n\")), mdx(\"p\", null, \"This is good for projects which does not support any scss markup, othercase, we recommend you to import it by using \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" imports -- See bellow.\"), mdx(\"br\", null), mdx(\"h4\", null, \"Importing via SCSS\"), mdx(\"p\", null, \"The second one is importing the SCSS file, in this case we assume your application is already using a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" pre-processor. So in the main \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" file of your application, you can import the All Animation scss file:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"// In your main scss file\\n@import \\\"../node_modules/all-animation/scss/main\\\"\\n\")), mdx(\"p\", null, \"In this way you're importing all the animations from All Animation, but in most of the cases you might not want to import all of them, since you might not are going to use it. \"), mdx(\"p\", null, \"That's why we also allow you to import specific animations, and it's very straight forward, in you main \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"scss\"), \" file, you first need to import all the configuration that is needed for making All Animation library work, and them you can import the animation which you want:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"// Core all-animation dependencies, like variables and mixins\\n@import \\\"../node_modules/all-animation/scss/config/_config\\\";\\n\\n// The specific animation which you want to use\\n// in this case \\\"a-bomb\\\"\\n@import \\\"../node_modules/all-animation/scss/modules/bomb/bomb\\\"\\n\")), mdx(\"p\", null, \"And vual\\xE1! Now you are able to use the bomb animation from All Animation library \\uD83E\\uDD29\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"how-to-use-it\",\n    mdxType: \"Typography\"\n  }, \"How to use it\"), mdx(\"p\", null, \"After the library is properly linked, its very simple to use it, you just need to add the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/docs/animation-classes\"\n  }, \"All Animation class\"), \" and your element will be animated, eg:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"hey\\\">This guy is going to be animated</div>\\n<button>Animte NOOOOW</button>\\n\\n<script>\\n// Attach the click event on the button\\ndocument.querySelector(\\\"button\\\").addEventListener('click', () => {\\n    // Adds the a-bomb class on our \\\"hey\\\" element\\n    document.querySelector('.hey').classList.add('a-bomb')\\n})\\n</script>\\n\")), mdx(\"p\", null, \"This example on top, is adding an animation on our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \" element when the user clicks on our button.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"docs","topics":"Ways of importing, How to use it","title":"Docs"}}},"pageContext":{"id":"8347fc8c-8e0f-5877-81d9-ab57d24a6291","slug":"docs"}},
     "staticQueryHashes": ["4197766145"]}

app-8a1a3778d82875d46e87.js.LICENSE.txt app-5b93088eaf1920b0ba88.js.LICENSE.txt

@@ -1,5 +1,5 @@
 {
     "componentChunkName": "component---src-infra-docs-layout-index-js",
     "path": "/docs/get-started",
-    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Get Started\",\n  \"description\": \"It’s really easy to use our library, so for making the initialization process easier to undestand, we have separated made this tutorial bellow, step by step.\",\n  \"slug\": \"get-started\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Basic usage, Event based animations\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Get Started\"), mdx(\"p\", null, \"It\\u2019s really easy to use our library, so for making the initialization process easier to undestand, we have separated made this tutorial bellow, step by step.\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"basic-usage\",\n    mdxType: \"Typography\"\n  }, \"Basic usage\"), mdx(\"h4\", null, \"Step 1\"), mdx(\"p\", null, \"Include the necessary files in the head , so that the framework work properly:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"yourpath/all-animation.css\\\" />\\n\")), mdx(\"h4\", null, \"Step 2\"), mdx(\"p\", null, \"To add the animation you can enter there by JavaScrip dynamically or statically placed there by html:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"a-dance\\\"> \\n    Trigger Class...\\n</div>\\n\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"event-based-animations\",\n    mdxType: \"Typography\"\n  }, \"Event based animations\"), mdx(\"h4\", null, \"Step 3 - Optional\"), mdx(\"p\", null, \"The usage of javascript is optional, we just demonstrate here in order to let you know how to trigger an animation after certain user action:\"), mdx(\"br\", null), mdx(\"p\", null, \"Using jQuery:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"$(\\\"button\\\").click((e) => {\\n    e.preventDefault();\\n    $(\\\"div\\\").addClass('a-dance');\\n});\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"Using plain javascript:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"button.addEventListener('click', (e) => {\\n    e.preventDefault();\\n\\n    div.classList.add('a-dance');\\n})\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"get-started","topics":"Basic usage, Event based animations","title":"Get Started"}}},"pageContext":{"id":"440b3fae-29a2-53e9-aebf-c6eb158f2b85","slug":"get-started"}},
+    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Get Started\",\n  \"description\": \"It’s really easy to use our library, so for making the initialization process easier to undestand, we have separated made this tutorial bellow, step by step.\",\n  \"slug\": \"get-started\",\n  \"date\": \"2021-10-22T00:00:00.000Z\",\n  \"topics\": \"Basic usage, Event based animations\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Typography = makeShortcode(\"Typography\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Get Started\"), mdx(\"p\", null, \"It\\u2019s really easy to use our library, so for making the initialization process easier to undestand, we have separated made this tutorial bellow, step by step.\"), mdx(Typography, {\n    as: \"h3\",\n    id: \"basic-usage\",\n    mdxType: \"Typography\"\n  }, \"Basic usage\"), mdx(\"h4\", null, \"Step 1\"), mdx(\"p\", null, \"Include the necessary files in the head , so that the framework work properly:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"yourpath/all-animation.css\\\" />\\n\")), mdx(\"h4\", null, \"Step 2\"), mdx(\"p\", null, \"To add the animation you can enter there by JavaScrip dynamically or statically placed there by html:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"a-dance\\\"> \\n    Trigger Class...\\n</div>\\n\")), mdx(Typography, {\n    as: \"h3\",\n    id: \"event-based-animations\",\n    mdxType: \"Typography\"\n  }, \"Event based animations\"), mdx(\"h4\", null, \"Step 3 - Optional\"), mdx(\"p\", null, \"The usage of javascript is optional, we just demonstrate here in order to let you know how to trigger an animation after certain user action:\"), mdx(\"br\", null), mdx(\"p\", null, \"Using jQuery:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"$(\\\"button\\\").click((e) => {\\n    e.preventDefault();\\n    $(\\\"div\\\").addClass('a-dance');\\n});\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"Using plain javascript:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"button.addEventListener('click', (e) => {\\n    e.preventDefault();\\n\\n    div.classList.add('a-dance');\\n})\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"slug":"get-started","topics":"Basic usage, Event based animations","title":"Get Started"}}},"pageContext":{"id":"3ed34dc5-6e5b-5672-a99b-e076d5d90f84","slug":"get-started"}},
     "staticQueryHashes": ["4197766145"]}

app-5b93088eaf1920b0ba88.js.map

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://all-animation.github.io/docs/animation-classes</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/docs/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/docs/docs</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/animations/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/</loc><changefreq>daily</changefreq><priority>0.7</priority></url></urlset>
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://all-animation.github.io/docs/animation-classes</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/docs/docs</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/docs/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/animations/</loc><changefreq>daily</changefreq><priority>0.7</priority></url><url><loc>https://all-animation.github.io/</loc><changefreq>daily</changefreq><priority>0.7</priority></url></urlset>

app-8a1a3778d82875d46e87.js

@@ -1 +1 @@
-{"namedChunkGroups":{"polyfill":{"name":"polyfill","assets":[{"name":"webpack-runtime-68a7bab63cf55d93cb3f.js","size":3949},{"name":"polyfill-fd5502421d629d1c910a.js","size":82637}],"filteredAssets":0,"assetsSize":86586,"filteredAuxiliaryAssets":2,"auxiliaryAssetsSize":217191},"app":{"name":"app","assets":[{"name":"webpack-runtime-68a7bab63cf55d93cb3f.js","size":3949},{"name":"framework-94ae85c82b1ba08b8dc6.js","size":128693},{"name":"styles.5b6fcc672bfafaf9cee0.css","size":16750},{"name":"app-8a1a3778d82875d46e87.js","size":199351}],"filteredAssets":0,"assetsSize":348743,"filteredAuxiliaryAssets":3,"auxiliaryAssetsSize":946382},"component---src-infra-docs-layout-index-js":{"name":"component---src-infra-docs-layout-index-js","assets":[{"name":"component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js","size":63830}],"filteredAssets":0,"assetsSize":63830,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":123602},"component---src-pages-404-js":{"name":"component---src-pages-404-js","assets":[{"name":"component---src-pages-404-js-d8595e517af05edf0b50.js","size":812}],"filteredAssets":0,"assetsSize":812,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":1885},"component---src-pages-animations-js":{"name":"component---src-pages-animations-js","assets":[{"name":"component---src-pages-animations-js-245c6531c3eee6a927ad.js","size":3250}],"filteredAssets":0,"assetsSize":3250,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":6992},"component---src-pages-index-js":{"name":"component---src-pages-index-js","assets":[{"name":"component---src-pages-index-js-6f3abbedf6f852c4a676.js","size":95828}],"filteredAssets":0,"assetsSize":95828,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":542320}},"assetsByChunkName":{"polyfill":["webpack-runtime-68a7bab63cf55d93cb3f.js","polyfill-fd5502421d629d1c910a.js"],"app":["webpack-runtime-68a7bab63cf55d93cb3f.js","framework-94ae85c82b1ba08b8dc6.js","styles.5b6fcc672bfafaf9cee0.css","app-8a1a3778d82875d46e87.js"],"component---src-infra-docs-layout-index-js":["component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js"],"component---src-pages-404-js":["component---src-pages-404-js-d8595e517af05edf0b50.js"],"component---src-pages-animations-js":["component---src-pages-animations-js-245c6531c3eee6a927ad.js"],"component---src-pages-index-js":["component---src-pages-index-js-6f3abbedf6f852c4a676.js"]},"childAssetsByChunkName":{}}
+{"namedChunkGroups":{"polyfill":{"name":"polyfill","assets":[{"name":"webpack-runtime-16174df1d8c894aa7464.js","size":3949},{"name":"polyfill-fd5502421d629d1c910a.js","size":82637}],"filteredAssets":0,"assetsSize":86586,"filteredAuxiliaryAssets":2,"auxiliaryAssetsSize":217191},"app":{"name":"app","assets":[{"name":"webpack-runtime-16174df1d8c894aa7464.js","size":3949},{"name":"framework-94ae85c82b1ba08b8dc6.js","size":128693},{"name":"styles.7dbf557f704252b82cb9.css","size":16407},{"name":"app-5b93088eaf1920b0ba88.js","size":199340}],"filteredAssets":0,"assetsSize":348389,"filteredAuxiliaryAssets":3,"auxiliaryAssetsSize":946361},"component---src-infra-docs-layout-index-js":{"name":"component---src-infra-docs-layout-index-js","assets":[{"name":"component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js","size":63830}],"filteredAssets":0,"assetsSize":63830,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":123602},"component---src-pages-404-js":{"name":"component---src-pages-404-js","assets":[{"name":"component---src-pages-404-js-d8595e517af05edf0b50.js","size":812}],"filteredAssets":0,"assetsSize":812,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":1885},"component---src-pages-animations-js":{"name":"component---src-pages-animations-js","assets":[{"name":"component---src-pages-animations-js-245c6531c3eee6a927ad.js","size":3250}],"filteredAssets":0,"assetsSize":3250,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":6992},"component---src-pages-index-js":{"name":"component---src-pages-index-js","assets":[{"name":"component---src-pages-index-js-871ee3faae4c2c70877a.js","size":94791}],"filteredAssets":0,"assetsSize":94791,"filteredAuxiliaryAssets":1,"auxiliaryAssetsSize":515020}},"assetsByChunkName":{"polyfill":["webpack-runtime-16174df1d8c894aa7464.js","polyfill-fd5502421d629d1c910a.js"],"app":["webpack-runtime-16174df1d8c894aa7464.js","framework-94ae85c82b1ba08b8dc6.js","styles.7dbf557f704252b82cb9.css","app-5b93088eaf1920b0ba88.js"],"component---src-infra-docs-layout-index-js":["component---src-infra-docs-layout-index-js-4c81b4390d914bea1052.js"],"component---src-pages-404-js":["component---src-pages-404-js-d8595e517af05edf0b50.js"],"component---src-pages-animations-js":["component---src-pages-animations-js-245c6531c3eee6a927ad.js"],"component---src-pages-index-js":["component---src-pages-index-js-871ee3faae4c2c70877a.js"]},"childAssetsByChunkName":{}}