{"_id":"@coffeekraken/text-intro","_rev":"3-22b13925514892a1e40fa9f839ef97af","name":"@coffeekraken/text-intro","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@coffeekraken/text-intro","version":"1.0.0","description":"Provide some cool animations to display your titles, etc... with style. They are all triggered when the element appear in viewport.","main":"dist/index.js","homepage":"http://coffeekraken.io","repository":{"type":"git","url":"git+https://github.com/coffeekraken/coffeekraken.git"},"scripts":{"postinstall":"node ./scripts/postinstall.js"},"keywords":["intro","text","appear","css","html","coffee","kraken","coffeekraken"],"author":{"name":"Coffeekraken","email":"hello@coffeekraken.io"},"contributors":[{"name":"Olivier Bossel","email":"olivier.bossel@gmail.com","url":"http://olivierbossel.com"}],"license":"MIT","dependencies":{"@coffeekraken/sugar":"^1.0.4"},"devDependencies":{"fs-extra":"^8.1.0"},"bugs":{"url":"https://github.com/coffeekraken/coffeekraken/issues"},"_id":"@coffeekraken/text-intro@1.0.0","_nodeVersion":"12.13.1","_npmVersion":"6.13.1","dist":{"integrity":"sha512-Hrk81H7KxLuC/GTzVaupSnrMeUiJPxOaVMd+mpyAayENggENdGvEuO2Fe9pygIgVP27idZw8SO0pvHtPXTyZCQ==","shasum":"4222fb96da76bc38b1271fa2b9f5426cb51dd99f","tarball":"https://registry.npmjs.org/@coffeekraken/text-intro/-/text-intro-1.0.0.tgz","fileCount":22,"unpackedSize":45547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9SRdCRA9TVsSAnZWagAAlgUP/1rqSYyuMMTkgky6dp/x\njEiWzGzb82y3yTmLw9p+rDn//pkqakw/mikvIeXzmwKy+J1WilA4hGOANjm+\n5ECygaTIyC3fwf3UcZR2KEF+I1LSbozYiSPZVQvspwVR9DI5zpqVgJm6XaoX\n8ITSvnCwz6R+0Yd0stnVLqOL2WrJywV14dqMDiIIr5qzlDa3EoO/R3Tvu95N\nFkapoa94hTDWLXLlhrWvlyZT7wOnIYC+OH0p7JfCZJ8P/PnrFaBXuTHSrgxg\nFk27DrK8P2X8EsBFRA/ssHJy3K55GmgpTmxN08U5/zenAKNExm8fev7osuwO\nb2ivGNLOYs/T8QDDxpOg1baUkI9g0R10V0hnsXuT1FZC0dE2KiqNdaO00GNR\nldcJDqtllShXTCkz+6/ZDssCzvBIzr0+w6HiJJWRF3gDx8KwF/hLhh6fd3Jy\naLr+znEkozd8jIfLwvsEeDIkTujJiz0x2LXXXTc/uKxbM+c5A8DFWgwXA0QA\nTLvuhIrlkjS2tTb2laMW0NKps8YaMJNcKweZQ1OELAyjiLNpRhDmPh/IGybl\nVEppPlrFiJLh8bV6Cv3UpUQ0F/DWeVpfrwwUJ4JY2VWw0kfCHp5EyDz+dIBB\n2Vflga2/VbKuDCk6v0QXJa1oSyX5IgHVFwMDmPtUueWtL0FDhX79vKcr+Dpv\nsoXh\r\n=tQK3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVP05Tzt9rF3kf3PyjszMUdmQGKuOs7gzbFotbDRTTzwIgG20pkyoVpOKbhmaH04j5ClPD2jB1qQZ9e+ITNZp0p80="}]},"maintainers":[{"name":"olivierbossel","email":"olivier.bossel@gmail.com"}],"_npmUser":{"name":"olivierbossel","email":"olivier.bossel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/text-intro_1.0.0_1576346716715_0.5981636010758207"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@coffeekraken/text-intro","version":"1.0.1","description":"Provide some cool animations to display your titles, etc... with style. They are all triggered when the element appear in viewport.","main":"dist/index.js","homepage":"http://coffeekraken.io","repository":{"type":"git","url":"git+https://github.com/coffeekraken/coffeekraken.git"},"scripts":{"postinstall":"node ./scripts/postinstall.js"},"keywords":["intro","text","appear","css","html","coffee","kraken","coffeekraken"],"author":{"name":"Coffeekraken","email":"hello@coffeekraken.io"},"contributors":[{"name":"Olivier Bossel","email":"olivier.bossel@gmail.com","url":"http://olivierbossel.com"}],"license":"MIT","dependencies":{"@coffeekraken/sugar":"^1.0.4","fs-extra":"^8.1.0"},"devDependencies":{},"bugs":{"url":"https://github.com/coffeekraken/coffeekraken/issues"},"_id":"@coffeekraken/text-intro@1.0.1","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Q9T5QqlOlDfJ0bII0BBCh05m4PWLPL/uYPp0NkjEdP7GI3mIs7m5Grp8sPJLQPm5g9ueCFN7EzSh8PXumuPUNA==","shasum":"9f949324ce68de11e1d5b4e1a2d9ac584a8d70a9","tarball":"https://registry.npmjs.org/@coffeekraken/text-intro/-/text-intro-1.0.1.tgz","fileCount":25,"unpackedSize":48175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFyRNCRA9TVsSAnZWagAAu98P/3Pm5+VFk7HQ9uG1F8y2\nwe+3P7ng8e7XwAakLMlWxjlj9MKF+TDhTj50II/BKQV93RoIIIovVMewpGYZ\npM2wc3CHPW+w+/rDzQmpqXrTJ7XM51fhYq3d9hjJ7bKrTBQNUVoOghSLt3kt\naQh8biqDa9YxuXXZSfTceC3KZZOH3hf8QmEWH32ebIPQDcUz9gTJVHH25XgG\n2TrVUEs9GBpdS/4MbpoMrh9PG7PLSlOeNoPdRv1W+E85qH3q1tCesYzrgJoY\nXdnaY/Uz3+ffwOUCNRAw207wBA1uuqAwBgL2QzuqmEukxL2zM9MHdX+a+ei+\nuZN5dVz/0fytJ/EQgeHjW4R5yYVGwnDmclXb8gfUn3s/G6pRvyYYh0ZGOJM+\nfLYzFyr1lCw6CtoHkkare02P/gsrWFeOJk1LT7Djx2cHw9cxIP7lqONw60Zb\n5bnOzxbQpjTx8EnwaVest2MWLy/JCyWNy7tFcWhIYJc2KvqRKf8xC4fb+t8y\nm4S+HaAZraRSBwjIUt/VNFV+b/2NMKmXmb4Nfn8awD8gih0AR3Pz/cepxAEe\njx4OLYAGw3EvOf6WygPOBPpJJUE15eKG6LiJ9YxqJNSpt6KIkjSLEoMO/W4H\nQZv6CMfLC014eDk6i0BI3SFL5c6zaOb3bSRagLoXyceuDYjPWwbp0RDk25uA\nHLw3\r\n=tggs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmlNXA8ZCkpoVkKuGgb5PENMLfuWQf4RA020Op9mIcfAiEAx4nfNCmQdGa8z0icW5qdUp64WYtoUtGqWXMdbtKlVtM="}]},"maintainers":[{"name":"olivierbossel","email":"olivier.bossel@gmail.com"}],"_npmUser":{"name":"olivierbossel","email":"olivier.bossel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/text-intro_1.0.1_1578574925369_0.9568737069557041"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2019-12-14T18:05:16.493Z","1.0.0":"2019-12-14T18:05:16.868Z","modified":"2022-07-27T14:26:43.952Z","1.0.1":"2020-01-09T13:02:05.460Z"},"maintainers":[{"name":"olivierbossel","email":"olivier.bossel@gmail.com"}],"description":"Provide some cool animations to display your titles, etc... with style. They are all triggered when the element appear in viewport.","homepage":"http://coffeekraken.io","keywords":["intro","text","appear","css","html","coffee","kraken","coffeekraken"],"repository":{"type":"git","url":"git+https://github.com/coffeekraken/coffeekraken.git"},"contributors":[{"name":"Olivier Bossel","email":"olivier.bossel@gmail.com","url":"http://olivierbossel.com"}],"author":{"name":"Coffeekraken","email":"hello@coffeekraken.io"},"bugs":{"url":"https://github.com/coffeekraken/coffeekraken/issues"},"license":"MIT","readme":"# Coffeekraken text-intro <img src=\".resources/coffeekraken-logo.jpg\" height=\"25px\" />\n\n![npm](https://img.shields.io/npm/l/@coffeekraken/text-intro?style=flat-square)\n![npm](https://img.shields.io/npm/v/@coffeekraken/text-intro?style=flat-square)\n![npm](https://img.shields.io/npm/dw/@coffeekraken/text-intro?style=flat-square)\n\nProvide some cool animations to display your titles, etc... with style. They are all triggered when the element appear in viewport.\n\n## Table of content\n\n2. [Features](#readme-features)\n2. [Install](#readme-install)\n3. [Requirements](#readme-requirements)\n4. [Get Started](#readme-get-started)\n5. [`[intro-activator]`](#readme-intro-activator)\n6. [Javascript API](doc/src/js)\n7. [SASS API](doc/src/scss)\n8. [Coffeekraken](#readme-coffeekraken)\n\n<a name=\"readme-features\"></a>\n\n## Features\n\n1. Multiple cool animations to display your titles, etc... with style\n2. Trigger the animation when element is in the viewport\n3. Support for [`[intro-activator]`](#readme-intro-activator) feature\n\n<a name=\"readme-install\"></a>\n\n## Install\n\n```\nnpm install @coffeekraken/text-intro --save\n```\n\n<a name=\"readme-requirements\"></a>\n## Requirements\n\nIn order to make this package work with your settings, you have to add the `node_modules/@coffeekraken` folder in the [load paths](https://sass-lang.com/documentation/at-rules/import#load-paths) of your `sass` installation.\n\n<a name=\"readme-get-started\"></a>\n## Get Started\n\nFirst import the component into your javascript file like so:\n\n```js\nimport lettersInReveal from '@coffeekraken/text-intro/js/lettersInReveal'\nimport lettersInRain from '@coffeekraken/text-intro/js/lettersInRain'\nimport slideIn from '@coffeekraken/text-intro/js/slideIn'\n// init listeners\nlettersInReveal();\nlettersInRain();\nslideIn();\n```\n\nThen import and generate the classes using the provided mixins like so:\n\n```scss\n@use '@coffeekraken/text-intro/index' as text-intro;\n@include text-intro.letters-in-reveal-classes();\n@include text-intro.letters-in-rain-classes();\n@include text-intro.slide-in-classes();\n```\n\nThen simply use it inside your html like so:\n\n```html\n<h1 intro=\"letters-in-reveal\">\n\tMy cool animated title\n</h1>\n<h1 intro=\"letters-in-rain\">\n\tMy cool animated title\n</h1>\n<h2 intro=\"slide-in-up\">\n\tMy cool animated title\n</h2>\n<h2 intro=\"slide-in-down\">\n\tMy cool animated title\n</h2>\n<h2 intro=\"slide-in-left\">\n\tMy cool animated title\n</h2>\n<h2 intro=\"slide-in-right\">\n\tMy cool animated title\n</h2>\n```\n\n<a name=\"readme-intro-activator\"></a>\n## `[intro-activator]`\n\nYou can tell you animations to be played depending on the state of one of his parent node. To do that, simply apply the `intro-activator` attribute on the parent you want and handle the animation state on this element directly.\n\nYou animation will be played if the `intro-activator` node has the `.active` class or the `[active]` attribute. This is useful for example in a slider if you want each slides to trigger the animations independently.\n\n```html\n<!-- here's an example -->\n<div intro-activator>\n\t<h1 intro=\"slide-in-up\">The animation will not been played</h1>\n</div>\n<div intro-activator class=\"active\">\n\t<h1 intro=\"slide-in-up\">The animation will been played</h1>\n</div>\n```\n\n<a name=\"readme-coffeekraken\"></a>\n\n# Coffeekraken\n\nWe are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose.\nAll what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...\n\n[![Coffeekraken](.resources/coffeekraken-logo.jpg)](https://coffeekraken.io)\n","readmeFilename":"README.md"}