{"id":17320124,"url":"https://github.com/jshjohnson/animate","last_synced_at":"2025-04-04T14:08:25.251Z","repository":{"id":2244098,"uuid":"45210959","full_name":"jshjohnson/Animate","owner":"jshjohnson","description":"A tiny JS (5KB) library to trigger animations on elements when they are within the viewport 👓","archived":false,"fork":false,"pushed_at":"2022-12-30T18:17:01.000Z","size":1237,"stargazers_count":358,"open_issues_count":20,"forks_count":38,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-30T04:50:11.875Z","etag":null,"topics":["animation","trigger-animations","vanilla-js","viewport","viewport-animations"],"latest_commit_sha":null,"homepage":"https://joshuajohnson.co.uk/Animate/","language":"CSS","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/jshjohnson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-29T21:14:00.000Z","updated_at":"2024-10-07T19:02:22.000Z","dependencies_parsed_at":"2023-01-13T11:43:44.608Z","dependency_job_id":null,"html_url":"https://github.com/jshjohnson/Animate","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshjohnson%2FAnimate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshjohnson%2FAnimate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshjohnson%2FAnimate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshjohnson%2FAnimate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jshjohnson","download_url":"https://codeload.github.com/jshjohnson/Animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190251,"owners_count":20898702,"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":["animation","trigger-animations","vanilla-js","viewport","viewport-animations"],"created_at":"2024-10-15T13:29:05.773Z","updated_at":"2025-04-04T14:08:25.216Z","avatar_url":"https://github.com/jshjohnson.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate.js [![Actions Status](https://github.com/jshjohnson/Animate/workflows/Unit%20Tests/badge.svg)](https://github.com/jshjohnson/Animate/actions) [![Actions Status](https://github.com/jshjohnson/Animate/workflows/Bundlesize/badge.svg)](https://github.com/jshjohnson/Animate/actions) [![npm](https://img.shields.io/npm/v/animate.js.svg)](https://www.npmjs.com/package/animate.js)\n\nA tiny library (~6kb) written in TypeScript to trigger animations on elements when they come into view 👓.\n\n[Demo](https://joshuajohnson.co.uk/Animate/)\n\n----\n### Interested in writing your own JavaScript plugins? Check out [ES6.io](https://ES6.io/friend/JOHNSON) for great tutorials!\n----\n\n## Setup\n```html\n\u003cscript src=\"/assets/js/dist/animate.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var animate = new Animate({        \n        target: '[data-animate]',\n        animatedClass: 'js-animated',\n        offset: [0.5, 0.5],\n        delay: 0,\n        remove: true,\n        scrolled: false,\n        reverse: false,\n        onLoad: true,\n        onScroll: true,\n        onResize: false,\n        disableFilter: false,\n        callbackOnInit: function() {},\n        callbackOnInView: function(el) {},\n        callbackOnAnimate: function(el) {},\n    });\n    animate.init();\n\u003c/script\u003e\n```\n\n## Installation\nTo install via NPM, run `npm install animate.js` \n\n## Options\n#### target\nType: `String` Default: `[data-animate]`\n\nElement(s) reference to target (`querySelectorAll` is called against this value). Once this element is in view, add animations.\n\n#### animatedClass\nType: `String` Default: `js-animated`\n\nClass to be added to element once animation has completed.\n\n#### offset\nType: `Array/Number` Default: `[0.5, 0.5]`\n\nThe vertical and horizontal percentages of the element that needs to be in the viewport before the animation triggers. If a single number is passed instead of an array, that number will be used for both the vertical and horizontally offset.\n\n*Examples*\n\n```js\n// Trigger animations when 50% of an elements height \n// is within the viewport and 100% of its width:\nvar animate = new Animate({\n    target: '[data-animate]',\n    animatedClass: 'visible',\n    offset: [0.5, 1],\n});\n\n// Trigger animations when 100% of an elements height \n// is within the viewport and 25% of its width:\nvar animate = new Animate({\n    target: '[data-animate]',\n    animatedClass: 'visible',\n    offset: [1, 0.25],\n});\n\n// Trigger animations when 50% of an elements height \n// is within the viewport and 50% of its width:\nvar animate = new Animate({\n    target: '[data-animate]',\n    animatedClass: 'visible',\n    offset: 0.5,\n});\n```\n\n####  delay\nType: `Number` Default: `0`\n\nMilisecond delay before animation is added to element in view.\n\n####  remove\nType: `Boolean` Default: `true`\n\nWhether animation classes should removed when the animations complete.\n\n####  reverse\nType: `Boolean` Default: `false`\n\nOnce the element has left the top of the viewport (by the same offset), remove the animations from element. When the element comes back into view, it will animate again.\n\n####  scrolled\nType: `Boolean` Default: `false`\n\nAnimate any elements that a user has already scrolled past on load. This will only trigger if the `onLoad` option (see below) is `true`.\n\n#### onLoad\nType: `Boolean` Default: `true`\n\nWhether to fire on DOMContentLoaded.\n\n#### onScroll\nType: `Boolean` Default: `true`\n\nWhether to fire on scroll.\n\n#### onResize\nType: `Boolean` Default: `false`\n\nWhether to fire on resize.\n\n### disableFilter\nType: `Function` Default: `null`\n\nFunction to determine whether Animate should animate elements.\n\n*Example*\n\n```js\n// Function to determine whether we are on a mobile device\nvar isMobile = function() {\n    if (window.matchMedia(\"(max-width: 480px)\").matches) {\n        return true;\n    } else {\n        return false;\n    }\n};\n\n// Disable Animate.js if isMobile returns true\nvar animate = new Animate({\n    onResize: true,\n    disableFilter: isMobile,\n});\n```\n\n#### callbackOnInit\nType: `Function` Default: `function(){}`\n\nFunction to run once Animate.js initialises\n\n#### callbackOnInView\nType: `Function` Default: `function(el){}`\n\nFunction to run once the element is in the viewport (pass parameter to access the element).\n\n#### callbackOnAnimate \nType: `Function` Default: `function(el){}`\n\nFunction to run once animation has completed (pass parameter to access the animated element).\n\n## Element overrides\n\n##### `data-animate`\n\nDefault way of targeting an element to animate (no value required). This can be overridden to be a custom attribute or class.\n\n##### `data-animation-classes`\n\nAnimations to be added to element when it is in view. To add multiple classes, seperate each class with a space (as you would normally).\n\n### Optional element overrides\n##### `data-animation-delay`\n\nOveride the plugin `delay` option per element.\n\n##### `data-animation-offset`\n\nOverride the plugin `offset` option per element.\n\n##### `data-animation-remove`\n\nOveride the plugin `removeAnimations` option per element.\n\n##### `data-animation-reverse`\n\nOveride the plugin `reverse` option per element.\n\n#### Examples\n```html\n\u003cdiv data-animate data-animation-classes=\"animated fadeIn\"\u003e\u003c/div\u003e\n\u003cdiv data-animate data-animation-classes=\"animated tada\" data-animation-delay=\"1000\"\u003e\u003c/div\u003e\n\u003cdiv data-animate data-animation-classes=\"animated bounce\" data-animation-offset=\"0.2, 0.5\"\u003e\u003c/div\u003e\n\u003cdiv data-animate data-animation-classes=\"animated bounce\" data-animation-remove=\"true\"\u003e\u003c/div\u003e\n```\n\n## Methods\n#### init();\nInitialises event listeners.\n#### kill();\nKills event listeners and resets options.\n#### render();\nAdds/removes animations without the need for event listeners.\n\n## Browser compatibility\nAnimate.js is supported in modern browsers from IE9 and above (i.e. browsers that support CSS animations). Due to discrepencies in support for `Element.classList`, I would recommend including the very good [classList polyfill](https://github.com/eligrey/classList.js/) before you include animate.js. I would also suggest using Modernizr to feature detect CSS animations/transitions and apply override styling for browsers that do not support those features.\n\nUsing SCSS, this may look like this:\n\n```css\n.animate {\n    opacity: 0;\n    .no-csstransitions \u0026, .no-cssanimations \u0026  {\n        opacity: 1;\n    }\n}\n```\n\n## Development\nTo setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:\n\n* ```npm install```\n\n### Gulp tasks\n* ```npm run dev```\n* ```npm run test```\n* ```npm run build```\n\n## Contributions\nIn lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp...bla bla bla\n\n## License\nMIT License \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshjohnson%2Fanimate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjshjohnson%2Fanimate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshjohnson%2Fanimate/lists"}