{"_id":"react-animation-on-scroll","_rev":"17-1f40b4daf992fc645f3c8acf854b67d1","name":"react-animation-on-scroll","dist-tags":{"latest":"5.1.0","prerelease":"5.1.0","beta":"1.0.0"},"versions":{"1.0.0":{"name":"react-animation-on-scroll","version":"1.0.0","private":false,"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"gitHead":"51f0679163629ebd65d25652efa37628fb48c186","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"homepage":"https://github.com/MetinArslanturk/react-animation-on-scroll#readme","_id":"react-animation-on-scroll@1.0.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-hoTKBLnl3nWC/O2tEyHoh/SMgiqZKC9PhZGTsL9fvg1xfVZoi2Avizva846gesbdafQLI22sUhPiFgZhWorsag==","shasum":"45c459a43e4a4d33493ff5716b70b8f68d9435cb","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-1.0.0.tgz","fileCount":24,"unpackedSize":94906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAEpNCRA9TVsSAnZWagAAjIYP/i+ufHZ8meeo1yIme+vI\nikteGxDR5B1OcnrE2nQi4le8uIqEUVEC0LdGf6wMWBzIgWsa/ghTrw4o61TS\nsx1NjiI3p73sbGrytYyD49RG9tbZCCANHQf8uBSxYcDhV3dX03n3/vCGDZ3i\n1jq5Y5mJ0eyD5NKXa0s47ap6gb6upVE3FSjygtqoTm4rD2mezUVCCJiG1YnR\ne0lxA+ozP+VsTjx6xYLQarubR+1zU3llM3LCvJ1DooRrRvwhTM2n6PWONBX0\nmG0b8UsMcZbK5y61cod80N6QiDi7aVwzxX+suqkuVNSuDzlMgkSmzTMgRJ1b\nuOEoLN0gXLZsgNWGXeSHTnIgKADMm+yjX7NpkxA5c6vizK8emyomxzXDk6gD\ngt+30BGSAR6eyDFQgMqkT8I2F/C6PQYYrAdmhRp8O7TnoUfZHOTeAi2Aq6sj\nGMnzM3jYz9zm/o2ZdooRhfykDhcTiarEz9d0ijKZDM64wKJKlVDSzDjKrRlw\n+7MwHn7wrH1QTq/vL8fqJlsfjv5JaAgRCmPpbCQrRIFhRCvo7HVdvKCoRRb0\nsLFMSatTaqZq415gUrsthKrgNV/4aoFRmpV72Slew2g3TmZ4rHx6DkOzTjMa\ncf2lv624pXpmJ5BH6jMRL/bLTmicgRgBDoGbLvq7hl/haxpUj62o4HhzeuPs\nvIUf\r\n=AQc6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHV/9KLq1iDL0rJeEhlqYnXjAtfhQmtBqHitHObhH6NQIgKpaDB3Zywft9PMzly9I42eKmgXbi5pNHtWznHdoPG1A="}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_1.0.0_1610631756564_0.639585352542466"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-animation-on-scroll","version":"2.1.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"gitHead":"61b887831958006a2d700a6cfe89d20637ccf455","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@2.1.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-UuqR569FimfZ5J2vB5dikmDxxAuXJBrQ1iD8GCrUD1u4WVkujkCiRMqDstJdnHtouPolXoZfARtmM5d0YTL0aw==","shasum":"97608c4e5a041eab2de6c19c6f189321b9fd80db","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-2.1.0.tgz","fileCount":24,"unpackedSize":95285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAYOXCRA9TVsSAnZWagAAGycP/izlX+j3aTXckXRncvow\nTmfspAQwxJBXajCpikV8Z3wVYLLTUPQFwbMfHLs9vzathS3B7s2pe/b+6OVu\nx404WEBREkCT3HVf5HGLUotxLCVJxUKLeHwNJtrrUtGbMZ0IfH5sW/NMXBBT\nrfMpWfoQMhJEy74xaWsg9QMRtX6sjofYn2oAxMbBpeu325vdUAUJD4CqnirS\n70uqfS0JBLNMUJ6JsmS4RkSjYgBxYpkERJG1QwcOc7oZeP3YKA9V++QFg6lY\n466iUJiry/LKLxdCU81YqKpYm1Afu9VXSGTRQpXW7Pm2+IfzOSlYuAag+dDW\ng0UUsi0FRWs+3hwYUickzBtQzJktzYQkKvuDYU4Pkn6RyqI+P5fOznFD7c3L\n9eAcQuoSwQTbBSkLKW0ySkoBXtcctDpTpfpBevDlh39RQ2YQOuKiID/JdG14\n9da493keZGVKOkHeVTfmyGfrrp1+5JkHuSgPdr6kYuS1bai6EtCWFwDY0eAU\nQvlcvXm66oDBRE4V/4kgu8in1Dkwitm6R7V6zZyW5DoXLtMXq48g0VuzqA5v\n6MXl2+s0Le92OtymN4wp2sfjayRhAGjdn9abBj6irgyfzCYCzgdHqpDjiz9w\nAvYO2emwaJdTqaie94rrvRaNteUsLheCjguzzNITt8SVsMzok/07J1f3QnNd\nB4WM\r\n=tLm2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkcKcUCuiaxjb63yK1IJxySyxNbIGgonKAhBdb570G9gIhAOamDyimR5086IJkZpKEMyEB67v80Qisrz3eck6mdaVm"}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_2.1.0_1610711958900_0.13215554047355038"},"_hasShrinkwrap":false},"2.2.0":{"name":"react-animation-on-scroll","version":"2.2.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"d61106fa23bcf5b7529e5ccf13e01689d78c029f","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@2.2.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-A9NHhaY4d6R3cfzOAPBhvXJ+fGlQZwAOWlKR0qInArinccyreMNBM4jvF0r9ItDZ1SMdM01obCfY1n8V6N4tjw==","shasum":"c8e4bf79f23c79b532ab5c2a9ce7fea9e306eb09","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-2.2.0.tgz","fileCount":24,"unpackedSize":95285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWvM5CRA9TVsSAnZWagAAMOYQAJ/tp21OsX56NSZ9gGWy\nnmaouieWlsS7z0kPDVPfQnv+fEJhKxp9/2uqTr4RNViKMoVVIIMSP3U2e6qn\nXGjQRinYFcyTqzTI1R0ebWyZPAsLSmJ2yFJgP3DVxhXhykw1hm/HAodEsbLe\nM5rPRIcd+JJXOFRYvS1qyD9Yn6y4KbsX95SyEtmKtoM1auagHU+NWpUiBQWH\npTMjIOXCZ3+TO0Uj01D2kIo+22dL3Pnc+AgPPkoo/xrpsUSd0LHB90SBu1NQ\noAqj8WxEaK+A+vMsTySHz5dv8hzGB/xPx4Ep7pMGmsfwfBfTE/crlL5bMSmA\nCxyKfrrttkvVMENuebuF1mZVlTlqEDFpbHmQbXjSjCwqv3EwlZLtVVYyrfR9\nDgMayqVxKNt8phq/PhybrcWMPuVJ0P0Misz0M4p+rhqSx2jD9mL8AD3VB1Ww\ner4ZIrGG3LB+RT7gQuJ4uJCefZurpVouerZDStPEsg8xRMJh+dl9Rplp6e7Q\n9QrPSfK8tpvHE/avTKjsdmO3msGL0YXz/XJ/09L2RV9PRUDxzCS16JbYhUea\nH8m+v2Z5VMspxxx1q3bWoWmn5E1FwOgo00+0RMsIqGTvw8qaa9HQFwf9tSmg\nPCt2+4x8gFFB5c4VImn1KoxtIICkKlFRcjqgL9UcOLwW7V+VJlFD+5eoejhe\nRLU2\r\n=QKBt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlcuDJpbf/RVdc1zFMd+gRYR5rIXLLZw6UCh//0jc1oAiEAkmvKmihTXwSsdgCiXEs+o0Jerf7vOTKpKrZxfB2MS0U="}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_2.2.0_1616573240986_0.14842995372748158"},"_hasShrinkwrap":false},"2.3.0":{"name":"react-animation-on-scroll","version":"2.3.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"72916030155e32943cd8409aa95bde739fd977b8","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@2.3.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-PoEeijlAkKgtR8Blu8c/3CCgs0f+shhWdfCSY8LOW5ZDfSSfnRUjoyZIpplQXpsiCqJKqVc3+ng062oAbcFxig==","shasum":"99539f17183402a7af351225608c9b15f83e50a1","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-2.3.0.tgz","fileCount":24,"unpackedSize":95540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWvWoCRA9TVsSAnZWagAA8h4P/2zzSXkWfgJCz7212O0L\nmCqB6nPTJGpJ/BrEILPEd1EJ/cnL7VuLPH8i80QV2+5FPwGP+3xDPHDz3Q1V\n/X25odo6Cm0klQ5qCsS8nWeGMyo2HO2QiCMsFjPymttyLKr0okGN1/sOcUiB\nn3W9CecLkoOKXT9yzrhzg/XfbdhPrrdGCbabmCungeOzDkWO6GxE6pioe/1/\nRDTqbNtbTFLvnt0OogvgnJoz0czTHeVac2mdPDcwVkhov30I8C9+8BqbWTdb\n37HaKLMe4ksz80JIbjyhezZ8ucoRbH9lHq71pkObLy/poeWAlBn/vV/v5VcU\nfkLaX0Kxpz0O/fi3Uvf0Mi38b8ZSO1JzRZPXuxxsX2QTBgBOdJpRIhgKl2pk\ny6COejtkU0gQ1eECLg74tvM8eTkdiYwPbe5JT7ocDNq4huo8K7fcqncvuKYj\nZkYAEqbLpi4YIuXQ4m6CjKNSpqiMPTNQeP6vrTeVQ0eOrayrcfdWdRxea2WP\nMtwnED5xBrzpM+NSH75R0sqIGvqxmjwHx0lWftInaelVuksNbo8zh6HzR7SQ\nG0WCR9D3owXOjfhzDTf57/Y5Nwm7fgG1j0+gcVRivhHwWRDkQgzj6yyf8+y8\nv7wYhwBkhw+C03gzV6vbvpaRXlrRSpFN0nomnZASYZycrC179xhMeII5whPt\ne3e5\r\n=jY+D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9R0+67EgU8zOwBak8z7VQFkedlj6NPwsVtH4CECq6xAiAPjJpSQ+Ya92oMgdMyz/KkuUAcinjXcQqiYQ3G0SP3Vw=="}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_2.3.0_1616573864417_0.7441786625026952"},"_hasShrinkwrap":false},"2.4.0":{"name":"react-animation-on-scroll","version":"2.4.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"0f30420b4847c1e85f7335448e06575e0885f8bb","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@2.4.0","_nodeVersion":"14.15.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-j3E5DFFcylYrQl/WPi7l6FSh803zcO8gOYbDLETXYjMOmSFEYaUWDRNBVDZjnRsTfxpLAw19+weFFsb0Iz+nPQ==","shasum":"879bc921fe789230d29095970027ecd28bfd642e","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-2.4.0.tgz","fileCount":24,"unpackedSize":96028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgs8ksCRA9TVsSAnZWagAAIksP/jCoXPqC7rCzvY8cs+yR\nbKGYnp2dr0T6KNx5pQED/sH0/L3D3qlkfHRAsVmrrT/GT6d6wQej+sZP6UKg\nBnu0q4clrzmnzhR7KNJKPxPVA/jD8gsuuSBlxuxBIsw/iXqKoRwPunQVAa22\nmCTWn6QGHiCPWCupPu5UN/Z5/XDzTRBPBJgbGAyPCWvShw8D+2vAUlB7FhMm\ngwpAlGGy/Qj8ao7xXU8AwMhFQSj9dUm7UJz79niUTLS+K1u6uABFZLHtmaPe\noKMonWozo/9S9HiR0Bk1Qb2mjiZEtWxNdjOwlQEnZPVspd/Xn38QxEZiZV4a\nCGBvG9mSXQI+JIOgusqiPZ06M3nMU9BFCxnLZPPYStM50+COS7VwoSOvhxdj\nQfc2Hkw4rdkrAjC2J4mgGw4+7ZTXQm6QM8HchObn9j1voQtD6+oAbOtfUfHc\nv3wiL1QF17+/J0GAPkqkLi+9VCSXIRP2PgxOKeeDzD4RhwgVCdhDMQV+nb4J\nwT+2KljX2V4DaXglUtUkefY8rn2OZeh8TCcKXmEHdLfBQ5MJebaPRA+TfZTi\nPJbazOex9R2nMLpMJzULC+0qZUMK65NqTvpmo211dfHcMuPlok1t9M7rEJS7\nPzDV3ck1yBLM3xUQDyfkqTcM0HWlKP3l+RIS78ku80TxMGF5p4TWiVnqXXpW\n2r05\r\n=r0Xg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9eDimkCS3gYTBn6fHUafwdnNldnMFxGXWvzY/ZhHqvAiEA1+iNcnhE7OckOv0OA5DGwwktMgAqZ8JGQQ6vZKqcWiI="}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_2.4.0_1622395179864_0.9920634098963064"},"_hasShrinkwrap":false},"4.0.0":{"name":"react-animation-on-scroll","version":"4.0.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"e32de69db471033af184424d7223b87a0aa1bd82","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@4.0.0","_nodeVersion":"16.9.0","_npmVersion":"7.24.2","dist":{"integrity":"sha512-5GyQFeA/xOqvUyT8FzZH7CxzNt419vm79O700IqcqXc+NsQAj9LWOOgY32iVeUg8As+UhCrkoIxVPann2mGqcQ==","shasum":"80bb6e91ea2d9db4bf86b8143ec51381b90d5984","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-4.0.0.tgz","fileCount":24,"unpackedSize":96574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDAwOCRA9TVsSAnZWagAA40cP/jE6wMCWYskAETNU9ahL\nYT0HKZwFoNaIsTrnz7NJzYO3OyF7JKFSgILvUsmT43rkdS4PwrnpXXFiq7ZR\nqXuFHyCYMiJnPeyFePAJT/d+FwJPjzOQZ7N/7poV9k4QE+LTpjVBxsFZrLxs\n3NjSvDyEZRbHfFJjTk+MFfdPp4vZQ0xqFakI69K448xGRH/iAFKZDlXxDT2O\ng7xV42bkxPEHw1+UOunAMnl8JyhmXZf6IqLtoRZJcdg6Bdln+YlQoQ90/min\nn5dNHwWHz17PZvvc2hdMJ6zYV4I1RWPwIPDjN7etIEDLPCZ12784sTZJBuAJ\nvjY1u94fXzK2ZU41Q9N3WlPATr4ozoZXG+DMhdw5E6s33y02unQpbIQHNmUJ\nL1Z124bKK1py9Z5WtQkYmlwrhJB/Wo6BytR36bUa/p9lispHydrCVaOb3zTu\nW3ns0c7ceXwUGc0oq9sXlbmN6FGdasKtPjgkSoIevRfXEt1HbtUhcXMhDVmt\nag0+Lwp6mTDjJn2kI6WRykzC+RWPREWOv/BM2GTZkQs7SbDRxXud71RnF0N2\neYMwJMK7S3BgjZhqStQEGMceXJaFliBZlLuoiHj9rHi24wtepgEM4bVvdQTv\nWN8ws5en/ssMT6ilcVWOg8yN/Vsq2jKpZ0Bq2uSDDdiprfVp25dad1VlxeEN\nkTrY\r\n=xJdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9NNnVnuFQzLjf2xAktQ3o8cDIfXsp1Vd+BdR8lr247gIhALUvHeWaYJ4jdsk99kZw7swREc9qa+RAWB/yTWaY/pPm"}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_4.0.0_1644956686636_0.6226659350054697"},"_hasShrinkwrap":false},"5.0.0":{"name":"react-animation-on-scroll","version":"5.0.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-plugin-typescript-to-proptypes":"^1.4.2","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"gitHead":"0833880b0e2d64ebb03863374ac3e8af215241e1","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@5.0.0","_nodeVersion":"16.9.0","_npmVersion":"7.24.2","dist":{"integrity":"sha512-/QPRc7Nb4KwHTxSRj7QbggeB93yjMYTHpaDTsdZkB4daZIb6oSwP7RR8RBR3tR49gRbOcSYxrgvLscxIIk/Xfg==","shasum":"9e075961de8fabef7a0a1e3c8fb11c80dc965db8","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-5.0.0.tgz","fileCount":24,"unpackedSize":96574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDA5QCRA9TVsSAnZWagAAnJ4P/1WWH7WIVe6uJCBWkPIw\nLSx4NjbRf8laL+Sq45Rbf3P56MZ5wnQDieOs516RdwwC/VgtdzmXrFWgJrHy\nFuK8IM+It8W55DCHAWNf0wGd1L0dcXH4cFIy8bOI5cBBddmrbyLicfgaIgPF\n/tkscnKSchLswGb/rXySNZPKTBISp+5+ip1r5HVZcJGPB2XwKC2SGg4pKyv7\nMtuEcvzDQz/U20nh0ki3Ewd7EED8aaCXmKAzM1k240YJaP/c1g6PfTPWLYWd\nPHK66tJFKYefqY5st3hKoaRTYociwEZPkRsOXi+MPogEBwNlB6DbYgaeMySy\nxjxHSrc4C/vx54/uowJEKCY6+e0IhdyMOQGa9RzjZFRutQxVW03fi9ral7Vy\ncUA4R3i90PBbkuosh1SetO5/t3/jKH7+EnY2grpTpHS5H0RtxNjcvIOX7smF\nZzE4ZFHEpEMUEa+x6Q5snQBnZe4tuasI41UNM2/vHOhC1rjGIt1gehNeouCu\nqEkB/gPFpMC5XBq3+VzolxvuSaZTkLxhRrt7/BRYTuMEcEMDbwJrAxKEMnkH\ndXBBs+xMN6FiAvSmgqrEcIxSW7/ONxkhUTrC2tOpGpCj7FO9teezchOOEEWS\nKRJOu74xTim4nUMeq87KnMHJCUpHH2wvgD4ejlcKkssIUc0F8GZ3GmC30sgy\neCid\r\n=YNu9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLZA26vX5m5mbU5m5g3iQfWo4V+0pKA65dx0f7Y35keAiEAj8Eg9YdwVdlwqAedUXFeWi5dBygWDkoSSjcR7uvy6Ko="}]},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_5.0.0_1644957264361_0.05918440945993231"},"_hasShrinkwrap":false},"5.0.2":{"name":"react-animation-on-scroll","version":"5.0.2","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/preset-typescript":"^7.16.7","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"5037774ca7660863f34213835acdfa968e176859","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@5.0.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-5acWfhZkZ5mnuTPC2RC/f104wRqzBJNTMdFE/MSTNhNmlSbos9IoTy/MhZL363rSBNYI4Ndw0WTNwgxmwvfAkw==","shasum":"d2aca41738ed97fe16694a31fff3c9109defa5c5","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-5.0.2.tgz","fileCount":24,"unpackedSize":94359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzJduWXJxARSA2awOgFNRxUQUaF5290ehCHAzeYZlBWAiEA+fGusTFoSJXzVv2IVTi3BJ9d8lTwMR4C51perBDhZH8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUKeiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8OA//btKElVZTx8qjB1BAuazo2uEPbxaEhL2Dp+Nnze3K91TahlZk\r\nlhaRac5+wqVjx6issLf2snZLnQg0p0Xnt2DNZmuLSHnXBqOwfE41ZjVhFllu\r\n1rEa77s7uusmSAVGZTdQojb+ay9fsK+YQukisbbLyCy3Z2IxhPKX+9SmvNxD\r\nKMUbSoUCHsr6LTjR8YIJyODvG5nijSSS02FIltXCB13zciL8f0dc3VztFvJC\r\ntXJL1Ccc3SvI+bHIAn4Gea3GmmajCXHFdJ/4IBLntziIMkDpcy9vI6dVVhWH\r\nspzXc1izeChEHOvP4OzrPmG6JRNLlriduumo0FvxMrd5TRMybwSDOzRXI1dV\r\n6y8f0SZCEdYfxe82fxT8s2mzxjWvsggAkWnA0T2egpmkObGttS/m6kOtPipX\r\nHFCD8Rsk2tpUrmXmaxRRNhhrRETKNeeKQSL+o20lpV93U8LSqJXyPT7WFsaK\r\nlWgewwJ7k3Anjdavkc3JceFxPrbHCAlBFT4rxdvnP97pVpGZxPoSNtBCxplU\r\nxofqXS5xDZHpK3nUh4/WzbVrCBPn28BFL7erJ0NnqdDWB4wV0Uxp5wSDZuwf\r\nJwif2q4bsjpDlEu+l6HBPwtqSGNLCWp7ta+dT6nbSZy1kvzaOJ57KqBny0Yf\r\n0GBMYzs7XoWgzpbMoDhDAz0asQl8RDr9+2U=\r\n=8er8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_5.0.2_1649452961883_0.7701404290648308"},"_hasShrinkwrap":false},"5.1.0":{"name":"react-animation-on-scroll","version":"5.1.0","private":false,"keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"},"main":"dist/js/index.js","module":"dist/esm/index.js","types":"dist/js/index.d.ts","publishConfig":{"access":"public","tag":"prerelease"},"repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","license":"MIT","dependencies":{"lodash.throttle":"^4.1.1"},"scripts":{"build:lib":"yarn build:babel && yarn build:types && node ./scripts/copyTS.js","build:babel":"concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"","build:babel:cjs":"BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env","build:babel:esm":"BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm","build:babel:umd":"BABEL_ENV=umd babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd","build:types":"tsc -p tsconfig.gen-dts.json","clean":"rimraf dist","develop":"yarn build:types && yarn build:babel:esm --skip-initial-build --watch --verbose"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">= 15.4.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-export-default-from":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/preset-typescript":"^7.16.7","@types/jest":"^26.0.15","@types/lodash.throttle":"^4.1.6","@types/node":"^12.0.0","@types/react":"^16.9.53","@types/react-dom":"^16.9.8","babel-plugin-transform-es2015-modules-umd":"^6.24.1","concurrently":"^5.3.0","fs-extra":"^9.0.1","typescript":"^4.0.3"},"readme":"# React Animation On Scroll\n\nReact component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/).\nThis library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll).\nRe-implemented the old one with react functional components in TypeScript. Also added animate.css@4.0+ support.\nSupports server-side rendering and TypeScript.\n\n## [Click to see Demo](https://www.metinarslanturk.com/react-animation-on-scroll)\n\n## Install:\n\n```\nnpm install react-animation-on-scroll --save\n```\n\nor\n\n```\nyarn add react-animation-on-scroll\n```\n\n**Please be sure to include animate.css (version 4 and higher) in someway in your project**\nThis can be done in a number of ways, eg:\n\n```\nnpm install --save animate.css\n```\n\nor\n\n```\nyarn add animate.css\n```\n\nand then importing in your project:\n\n```\nimport \"animate.css/animate.min.css\";\n```\n\nOr by simply including a link to the file hosted by CDNJS:\n\n```\n<head>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\">\n</head>\n```\n\n## Most Simple Use:\n\n```\nimport { AnimationOnScroll } from 'react-animation-on-scroll';\n<AnimationOnScroll animateIn=\"animate__bounceIn\">\n  <h2>Some Text</h2>\n</AnimationOnScroll>\n```\n\n## Properties:\n\n**offset** - default 150\n\nThe \"viewport\" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the \"viewport\", animateIn is triggered. When no part of the element is in the \"viewport\", animateOut is triggered. This size of the \"viewport\" can be overridden by setting the offset property.\n\n**animateIn**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element enters the \"viewport\" (see offset property for more details on this).\n\n**animateOut**\n\nAny css animation defined against a class, be it from [animate.css](https://daneden.github.io/animate.css/) or an animation that you have created yourself. The Animation triggers when the element is leaving the \"viewport\" (see offset property for more details on this).\n\n**duration** - default 1\n\nAnimation duration in seconds.\n\n**initiallyVisible** - default false\n\nWhether the element should be visible to begin with or not. Recomending to set true if you have got server-side rendering.\n\n**delay** - default 0\n\nHow long to delay the animation for (in milliseconds) once it enters or leaves the view.\n\n**animateOnce** - default false\n\nWhether the element should only animate once or not.\n\n**style** - default {}\n\nA style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.\n\n**scrollableParentSelector**\n\nBy default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.\n\n**afterAnimatedIn**\n\nCallback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**afterAnimatedOut**\n\nCallback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution.\nExample:\n\n```\nfunction(visible) {\n  if (visible.inViewport) {\n    // Part of the element is in the viewport (the area defined by the offset property)\n  } else if (visible.onScreen) {\n    // Part of the element is visible on the screen\n  } else {\n    // Element is no longer visible\n  }\n}\n```\n\n**animatePreScroll** - default true\n\nBy default if a ScrollAnimation is in view as soon as a page loads, then the animation will begin. If you don't want the animation to being until the user scrolls, then set this to false.\n\nPlease feel free to contribute or contact from contact@metinarslanturk.com\n","readmeFilename":"README.md","gitHead":"3c128ef94a0a661b749b5f484431397aa9fa7808","description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"_id":"react-animation-on-scroll@5.1.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-UBhlXUig+AGwDpRoqFC6qFh1mCIperwy1Pk7dJTb0XgpDzERF4f6fhoqFY2+on9Bf1n4OfUrRw4xsnKfQt6U7w==","shasum":"4b69419d187bb5fdf2c4a01208d4a654ac8d883f","tarball":"https://registry.npmjs.org/react-animation-on-scroll/-/react-animation-on-scroll-5.1.0.tgz","fileCount":24,"unpackedSize":94359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuzLAUGTVfioYIxarPYXhk0tYXPrPU3bEuceBdQOpcHAiAeNjGpNYonzx+JgD7MC/DA5CvtLigb38ztsOtQvTTvYg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUKpiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKphAAmfMmoOVuOBbSgTF16yGczIwMLoxzQ4uT+PQfcOx20ZDqXkmn\r\nPWSyCBHtLGudruLARjGEI+7sI2V7btLjaXdHa59UiXWz65I6viA4PVEQomJ6\r\np8ON8NbKo4yU3iHpsx+yd9SvY/qvT6HjxALGW2YuE/2yUVmlRFSZGRzJVY6j\r\nOhRpiKwkJly+oYdbgMVbY45MLlsuPUbdYeHVTCejTqIXgEjXC7NZq4TZNKRT\r\n+Q5RMl8BgisCCvsPpX/5WluxbkD7u/fXTlNiNvGQIfZ7Zpo2Bl4LMBeSwXHf\r\nXXdKGDKfZD9pQFAjWB/DTcXDx8R8rzP1ohq88PtstzD3ah+uuBq1jDzIT78y\r\nd27feUpaxjPoUn3MaVnDFxn3Z3ae02db8fiBURCRk9iPyX6zAdx2BUJNwJu2\r\ncqLOC7x6yye1Y3N0Q1Zox/N6p49H7OoKOurXxGBdayRZ4irKHq2Qt7NzOZIT\r\nQ3y1Cl3zPuGupMW53bLw0l/m8sz2dyQyG+vXsG3eTQ3qq+uDfgf/IMN41krv\r\n2gteRxkt3neHQfo3hASL0DSTQG6zhzZKNcpPp7ULlagJ+jILJJiyocwJWb9G\r\nBLm1vHX9mME7E3WLO1zUT0TOzEaITKVlglRdl1VMcL45+rPTMdaTvf03lUdL\r\nVNVZTnxl4I8MhkJOrwIpHo7ynx9QhnKyjE8=\r\n=whaD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"},"directories":{},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-animation-on-scroll_5.1.0_1649453666114_0.523046474595477"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-14T13:42:36.492Z","1.0.0":"2021-01-14T13:42:36.689Z","modified":"2022-05-14T06:05:51.156Z","1.0.1":"2021-01-15T11:39:23.024Z","2.0.0":"2021-01-15T11:44:18.445Z","2.1.0":"2021-01-15T11:59:19.055Z","2.2.0":"2021-03-24T08:07:21.131Z","2.3.0":"2021-03-24T08:17:44.557Z","2.4.0":"2021-05-30T17:19:39.965Z","4.0.0":"2022-02-15T20:24:46.876Z","5.0.0":"2022-02-15T20:34:24.529Z","5.0.2":"2022-04-08T21:22:42.070Z","5.1.0":"2022-04-08T21:34:26.242Z"},"maintainers":[{"name":"metinarslanturk","email":"metinarslanturkk@gmail.com"}],"description":"React component to animate elements on scroll with [animate.css](https://daneden.github.io/animate.css/). This library is re-implementation of [dbramwell/react-animate-on-scroll](https://github.com/dbramwell/react-animate-on-scroll). Re-implemented the ol","homepage":"https://www.metinarslanturk.com/react-animation-on-scroll","repository":{"type":"git","url":"git+https://github.com/MetinArslanturk/react-animation-on-scroll.git"},"bugs":{"url":"https://github.com/MetinArslanturk/react-animation-on-scroll/issues"},"license":"MIT","readme":"","readmeFilename":"","keywords":["reactScrollEffects","react scroll","reactJS","react-component","animate","animation","on","scroll","reactAnimationOnScroll"],"author":{"name":"MetinArslanturk"}}