{"id":16701072,"url":"https://github.com/scriptex/animateme","last_synced_at":"2025-03-17T00:33:55.740Z","repository":{"id":38422350,"uuid":"42104235","full_name":"scriptex/AnimateMe","owner":"scriptex","description":"Reveal DOM elements as you scroll","archived":false,"fork":false,"pushed_at":"2025-03-04T04:31:18.000Z","size":1323,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T06:41:21.318Z","etag":null,"topics":["scroll-animations","scroll-events"],"latest_commit_sha":null,"homepage":"https://animate-me.atanas.info","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2015-09-08T09:55:04.000Z","updated_at":"2025-03-04T04:31:20.000Z","dependencies_parsed_at":"2024-01-23T19:25:47.873Z","dependency_job_id":"234bb231-4172-4e66-9a14-30b74498e9fa","html_url":"https://github.com/scriptex/AnimateMe","commit_stats":{"total_commits":374,"total_committers":9,"mean_commits":41.55555555555556,"dds":0.6417112299465241,"last_synced_commit":"0c6822a919532cdf0b958b9cfae766a73c6d1c65"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2FAnimateMe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2FAnimateMe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2FAnimateMe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2FAnimateMe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/AnimateMe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955668,"owners_count":20374371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["scroll-animations","scroll-events"],"created_at":"2024-10-12T18:28:27.086Z","updated_at":"2025-03-17T00:33:55.421Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"[![Travis CI](https://travis-ci.com/scriptex/AnimateMe.svg?branch=master)](https://travis-ci.com/scriptex/AnimateMe)\n[![Github Build](https://github.com/scriptex/AnimateMe/workflows/Build/badge.svg)](https://github.com/scriptex/AnimateMe/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/AnimateMe/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/AnimateMe\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-animateme-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/animateme/badge)](https://www.codefactor.io/repository/github/scriptex/animateme)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/AnimateMe/README.md?pixel)](https://github.com/scriptex/AnimateMe/)\n\n# Animate Me\n\nAnimate DOM elements when they enter/leave the browser viewport.\n\nThis library uses a small amount on JavaScript and leaves the actual animations to the CSS.\n\nYou have the freedom to implement your own animations, use predefined (via another library) or use the built-in fade in/out animation.\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/AnimateMe?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/AnimateMe?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/AnimateMe?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/AnimateMe)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/AnimateMe?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/AnimateMe?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/AnimateMe?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/AnimateMe?style=plastic)\n\n## Dependencies\n\nThere are no dependencies and the library is ready to be used in any environment.\n\nIf you, however, wish to develop the library, extend it, fix it, etc, you need to fork this repository and install its development dependencies.\n\n## Install\n\n```sh\nnpm i animateme\n\n# or\n\nyarn add animateme\n```\n\n## Usage\n\nIn your HTML create the elements that you want to be animated.\n\nThe default class name used for the animations is `animate-me`.\n\nThen\n\n```javascript\nimport AnimateMe from 'animateme';\n\n// or\n\nimport { AnimateMe } from 'animateme';\n```\n\nand create a new instance with the default settings\n\n```javascript\nnew AnimateMe();\n```\n\nor use your own options\n\n```javascript\nnew AnimateMe('.your-element', {\n\toffset: 0.8,\n\treverse: false,\n\tanimatedIn: 'your-custom-class',\n\toffsetAttr: 'data-offset-top',\n\tanimationAttr: 'data-animation-name',\n\ttouchDisabled: false\n});\n```\n\nIf you wish to use the defaults, make sure to include the predefined CSS file.\n\n```css\n@import 'animateme/dist/animate.me.css';\n```\n\nor just use it as a good old `\u003clink\u003e` tag.\n\n**Note**\n\nUsing `AnimateMe` via a good old `\u003cscript\u003e` tag is currently supported only using helper libraries such as `requirejs`, `systemjs`, etc.\n\n```html\n\u003c!-- Import the Require JS script --\u003e\n\u003cscript src=\"https://unpkg.com/requirejs\"\u003e\u003c/script\u003e\n\n\u003c!-- Then require the AnimateMe script from your local folder and use it --\u003e\n\u003cscript\u003e\n\trequire(['./your/scripts/folder/animate.me.js'], function ({ AnimateMe }) {\n\t\tnew AnimateMe();\n\n\t\t// or with custom options\n\n\t\tnew AnimateMe('.your-element', {\n\t\t\toffset: 0.8,\n\t\t\treverse: false,\n\t\t\tanimatedIn: 'your-custom-class',\n\t\t\toffsetAttr: 'data-offset-top',\n\t\t\tanimationAttr: 'data-animation-name',\n\t\t\ttouchDisabled: false\n\t\t});\n\t});\n\u003c/script\u003e\n```\n\nFor the best experience please use a module bundler such as Webpack, Parcel, Rollup or Browserify.\n\n---\n\n## Options\n\n1.  Set your own classname for the animated element when in viewport:\n\n    `animatedIn: 'animate-me--in'`\n\n2.  Set the animation delay in pixels via `\"data-offset\"` attribute. This attribute is added to the HTML element you want to animate. You can change this attrubute name in the options:\n\n    `data-offset=\"120\"`\n\n3.  Choose to disable the animations on touch devices\n\n    `touchDisabled: false`\n\n4.  Choose the start point of the animations relatively to the viewport:\n\n    `offset: 0.8`\n\n    0.8 means that all animations will start when the top of the element is at 80% from the top of the viewport\n\n    This number should be between 0 and 1.\n\n5.  Choose whether to run the animation every time the element enter the viewport:\n\n    `reverse: false`\n\n6.  Optionally, you can use an external library such as [Animate.css](https://daneden.github.io/animate.css/). If you choose to do so, make sure that you add the animation name in the `data-animation` attribute of your DOM element. You can modify this attribute name in the options:\n\n    `data-animation=\"bounce\"`\n\n## Supported Browsers\n\nAll browsers which know CSS transitions are supported.\n\nIE9 and below will simply ignore the transitions and show the content as is.\n\nJust remember to add all CSS vendor prefixes, just in case :)\n\n## Default setup:\n\n```javascript\nnew AnimateMe('.animate-me', {\n\toffset: 0.5, // Element will animate in when above the half of the viewport\n\treverse: true, // Element will animate out when below the half of the viewport\n\tanimatedIn: 'animate-me--in', // Class name to add to the element when above half of the viewport\n\toffsetAttr: 'data-offset', // Element's offset attribute\n\tanimationAttr: 'data-animation', // Element's custom animation name\n\ttouchDisabled: true // Animations will not run on touch devices\n});\n```\n\n## Destroy animations / event listeners\n\nIf you want to stop AnimateMe, there are two ways to do so:\n\n1.  Calling `unbind` on the instance will remove all event listeners which will cause your animations to stop working.\n2.  Calling `cleanup` on the instance will remove all CSS classes set to your elements by AnimateMe.\n3.  Calling `destroy` on the instance will remove all event listeners and all CSS classes set to your elements by AnimateMe, effectively restoring their initial state.\n\nExample:\n\n```javascript\nconst instance = new AnimateMe();\n\n// Remove event listeners but keep the CSS classes\ninstance.unbind();\n\n// Remove CSS classes from all elements\ninstance.cleanup();\n\n// Remove event listeners and the CSS classes\ninstance.destroy();\n```\n\n## Trigger custom events\n\nIt is possible to control the AnimateMe instance via custom events.\nThe custom events are called on the `window` object.\n\nThere are three events implemented:\n\n1.  `animateme:enable`: Enables the instance. Equals to a call to `start` on the instance.\n2.  `animateme:destroy`: Destroys the instance. Equals to a call to `destroy` on the instance.\n3.  `animateme:cleanup`: Cleans previously set CSS classes to AnimateMe elements. Equals to a call to `cleanup` on the instance.\n\nExample usage of custom events:\n\n```javascript\n// First create the custom events\nconst enable = new CustomEvent('animateme:enable');\nconst destroy = new CustomEvent('animateme:destroy');\nconst cleanup = new CustomEvent('animateme:cleanup');\n\n// Then dispatch an event\nwindow.dispatchEvent(cleanup);\nwindow.dispatchEvent(destroy);\nwindow.dispatchEvent(enable);\n```\n\n**Important note:**\n\n**Internet Explorer [does not fully support](https://caniuse.com/#feat=customevent) `new CustomEvent`.**\n\n**You have to create the custom events in a way that IE understands it.**\n\n**Something like: `document.createEvent('CustomEvent')`.**\n\n## API\n\nAnimateMe provides you with access to its API - class methods which allow you to have full control over the instance and its properties.\n\n**You should use this API with caution.**\n\nFirst, you need to have an initialized instance of the `AnimateMe` class:\n\n```javascript\nconst instance = new AnimateMe();\n```\n\n### Then you can modify the instance properties:\n\n```javascript\n/**\n * Update the options of the AnimateMe instance\n */\ninstance.options = {\n\toffset: 0.5,\n\treverse: true,\n\tanimatedIn: 'animate-me--in',\n\toffsetAttr: 'data-offset',\n\tanimationAttr: 'data-animation',\n\ttouchDisabled: true\n};\n\n/**\n * Update the elements which the instance is animating.\n * Useful after programmatiacally updating the DOM (for example after AJAX call)\n */\ninstance.animated = Array.from(document.querySelectorAll('.your-new-selector'));\ninstance.updateInstance();\n\n/**\n * Update the CSS selector for the animating elements.\n * You should not need to change this.\n */\ninstance.selector = '.your-new-selector';\ninstance.updateInstance();\n```\n\n### You can use the following public instance methods:\n\n```typescript\n/**\n * Gets the value of the window.pageYOffset property\n * and assigns it to a private class property used to\n * calculate offsets and animate DOM elements.\n */\nsetCurrentScroll();\n\n/**\n * Gets the value of the window.innerHeight property\n * and assigns it to a private class property used to\n * calculate offsets and animate DOM elements.\n */\ngetWindowDimensions();\n\n/**\n * Attaches event listeners to the document.\n * Useful after the listeners have been removed for some reason.\n */\nbind();\n\n/**\n * Removes the event listeners from the document.\n * Useful if you want to cleanup after removing all animated\n * DOM elements.\n */\nunbind();\n\n/**\n * Removes the `animatedIn` classname from all animated elements.\n */\ncleanup();\n\n/**\n * Removes the event listeners from the document.\n * Removes the `animatedIn` classname from all animated elements.\n * Shortcut to calling both unbind() and cleanup()\n */\ndestroy();\n\n/**\n * Triggers the animation for all elements.\n */\nanimate();\n\n/**\n * Sets the elements which need to be animated.\n * Useful after DOM updates (like AJAX calls or similar).\n */\nsetElements();\n\n/**\n * Updates the `offsets` class property which is used\n * to animate the elements.\n */\nupdateOffsets();\n\n/**\n * Updates the whole instance.\n * @param {Boolean} shouldAnimate Flag based on which the `animate()` method is called.\n */\nupdateInstance(shouldAnimate: boolean = false);\n```\n\n## Bonus\n\nIf you chose to use the predefined classnames `animate-me` and `animate-me--in` then you can take advantage of the built-in animations.\nJust include the css file (`/dist/animate.me.css`) in your project and then add additional classname to your animated elements.\n\nThere are several predefined animations and their classnames are:\n\n-   `animate-me--fadeIn`\n-   `animate-me--slideUp`\n-   `animate-me--slideDown`\n-   `animate-me--slideLeft`\n-   `animate-me--slideRight`\n-   `animate-me--pop`\n\n## TypeScript support\n\nTypeScript is supported out of the box. The types declaration file should be automatically picked up by TypeScript.\n\nThe TypeScript declaration file is located in the `/dist` folder.\n\nIf you want to use the raw TypeScript version of the module:\n\n```typescript\nimport AnimateMe from 'animate-me/src/animate-me';\n\n// and then use it as shown above\n```\n\n## Demo\n\nThere is a simple demo illustrating how the AnimateMe library works.\n\nCheck it out [here](https://animate-me.atanas.info/).\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fanimateme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fanimateme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fanimateme/lists"}