{"id":13700294,"url":"https://github.com/usablica/kissui.scrollanim","last_synced_at":"2025-05-16T03:06:09.365Z","repository":{"id":58238592,"uuid":"64544069","full_name":"usablica/kissui.scrollanim","owner":"usablica","description":"CSS3 scroll animation library","archived":false,"fork":false,"pushed_at":"2017-03-25T12:44:20.000Z","size":67,"stargazers_count":1424,"open_issues_count":7,"forks_count":130,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-05-08T13:15:04.381Z","etag":null,"topics":["animation","animations-scrollanim","css3","javascript","viewport"],"latest_commit_sha":null,"homepage":"http://scrollanim.kissui.io/","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/usablica.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-30T12:55:54.000Z","updated_at":"2025-04-10T16:26:26.000Z","dependencies_parsed_at":"2022-08-31T00:30:44.332Z","dependency_job_id":null,"html_url":"https://github.com/usablica/kissui.scrollanim","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/usablica%2Fkissui.scrollanim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usablica%2Fkissui.scrollanim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usablica%2Fkissui.scrollanim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usablica%2Fkissui.scrollanim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usablica","download_url":"https://codeload.github.com/usablica/kissui.scrollanim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"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","animations-scrollanim","css3","javascript","viewport"],"created_at":"2024-08-02T20:00:53.608Z","updated_at":"2025-05-16T03:06:04.347Z","avatar_url":"https://github.com/usablica.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# kissui.scrollanim\nCSS3 scroll animation library\n\nThis library is a part of Kissui project.\n\n# Install\n\n## Bower\n\nYou can use bower to install the package:\n\n```\nbower install kissui.scrollanim\n```\n\n## CDN\n\nYou can use **cdnjs**: https://cdnjs.com/libraries/kissui.scrollanim\n\n\n## Manually\nYou can also download and include files manually from the latest [releases](https://github.com/usablica/kissui.scrollanim/releases).\n\n# Getting Started\n\nThis projects doesn't have any dependecies. All you need to do is to include the `scrollanim.js` and `scrollanim.css` in your page.\n\n\u003e Please note that you don't need jQuery, Angular.js, React, Whatever. \n\nWrite your first awesome scroll animation:\n\n```html\n\u003cp data-kui-anim=\"fadeIn\"\u003eShow this with fade-in\u003c/p\u003e\n```\n\nSimple, isn't it?   \n\nNeed more help? have a look at `/example` folder in the project OR http://scrollanim.kissui.io\n\n\n# Adding animations\n\nYou can add animations using `data-kui-...` attributes **or** programmatiaclly using the `kissuiScrollAnim.add` method. Read following sections for more details.\n\n## `data-kui` attributes\n\nCurrently we have two attributes to define the options:\n\n  - `data-kui-anim`: Mandatory. Animation name. see [Animations](#animations) section.\n  - `data-kui-event`: Option to define the event to trigger. see [Events](#events) section. Default is `in`.\n\nExample:   \n\n```html\n\u003cdiv data-kui-anim=\"fadeIn\" data-kui-event=\"top\"\u003e\n```\n\n## Programmatically (JSON)\n\nAlso, you can use the `kissuiScrollAnim.add` method to add the animations.\n\nExample:\n\n```javascript\nkissuiScrollAnim.add(element, {\n  'in': 'fadeIn'\n});\n```\n\n# Options\n\nThere are some options to define the default values in Scrollanim.\n\n  - `triggerOnInit`: Trigger the events on module init (automatically after page load)?. Default is `true`.\n  - `attributePrefix`: Prefix for all `data-...` attributes. Default is `data-kui-`.\n  - `animAttribute`: Name of animation attribute. Default is `anim`\n  - `eventAttribute`: Event attribute name. Default is `event`\n  - `defaultEvent`: Default event to trigger when `data-kui-event` is not provided. Default is `in`\n  - `autoReset`: Reset the animation event after element is out of the viewport?. Defualt is `true`\n\nTo alter event you can use `setOption` or `setOptions` methods:\n\n```javascript\nkissuiScrollAnim.setOption('autoReset', false)\n```\n\nor\n\n```javascript\nkissuiScrollAnim.setOptions({ \n  'autoReset': false,\n  'triggerOnInit': false\n})\n```\n\n# Events\n\nScrollanim uses [`kissui.position`](https://github.com/usablica/kissui.position) to manage and track elements. Please note that `kissui.position` is a builtin dependency and you don't need to include anything in your page.\n\n`Kissui.position` supports these events:\n\n- `in` - when element is in the viewport\n- `out` - when element is not in the viewport\n- `middle` - center aligned element (vertically)\n- `center` - center aligned element (horizontally)\n- `top` - element at the top of the page\n- `bottom` - element at the bottom of the page\n- `left` - element at the left side of the page\n- `right` - element at the right side of the page\n\nAlso, it is possible to use a compond of events together, e.g. `center middle`, `in right` or `out left`. Please check out [`kissui.position`](https://github.com/usablica/kissui.position) for more information.\n\nIt is possible to use both `data-kui-anim` attribute and `kissuiScrollAnim.add(element, event)` to bind an element and reveal it after scrolling but please note that `data-kui-anim` attribute uses `in` event of `kissui.position` by default.\n\nAn example of adding an element using the API:\n\n```javascript\nkissuiScrollAnim.add(element, {\n  'in': 'fadeIn'\n});\n```\n\nOr\n\n```javascript\nkissuiScrollAnim.add(element, {\n  'center middle': 'fadeIn'\n});\n```\n\nOr\n\n\n```javascript\nkissuiScrollAnim.add(element, {\n  'center middle': 'fadeIn',\n  'out': 'fadeOut'\n});\n```\n\nSuper cool.\n\n\u003cimg width=200 src='http://adorablekittens.com/wp-content/uploads/2015/09/supercoolcat.jpg' /\u003e\n\n# Animations\n\nScrollanim uses Animate.css as a builtin dependency to provide stunnishing animations. \n\nHere is a list of supported animations:\n* `bounce`\n  * `flash`\n  * `pulse`\n  * `rubberBand`\n  * `shake`\n  * `headShake`\n  * `swing`\n  * `tada`\n  * `wobble`\n  * `jello`\n  * `bounceIn`\n  * `bounceInDown`\n  * `bounceInLeft`\n  * `bounceInRight`\n  * `bounceInUp`\n  * `bounceOut`\n  * `bounceOutDown`\n  * `bounceOutLeft`\n  * `bounceOutRight`\n  * `bounceOutUp`\n  * `fadeIn`\n  * `fadeInDown`\n  * `fadeInDownBig`\n  * `fadeInLeft`\n  * `fadeInLeftBig`\n  * `fadeInRight`\n  * `fadeInRightBig`\n  * `fadeInUp`\n  * `fadeInUpBig`\n  * `fadeOut`\n  * `fadeOutDown`\n  * `fadeOutDownBig`\n  * `fadeOutLeft`\n  * `fadeOutLeftBig`\n  * `fadeOutRight`\n  * `fadeOutRightBig`\n  * `fadeOutUp`\n  * `fadeOutUpBig`\n  * `flipInX`\n  * `flipInY`\n  * `flipOutX`\n  * `flipOutY`\n  * `lightSpeedIn`\n  * `lightSpeedOut`\n  * `rotateIn`\n  * `rotateInDownLeft`\n  * `rotateInDownRight`\n  * `rotateInUpLeft`\n  * `rotateInUpRight`\n  * `rotateOut`\n  * `rotateOutDownLeft`\n  * `rotateOutDownRight`\n  * `rotateOutUpLeft`\n  * `rotateOutUpRight`\n  * `hinge`\n  * `rollIn`\n  * `rollOut`\n  * `zoomIn`\n  * `zoomInDown`\n  * `zoomInLeft`\n  * `zoomInRight`\n  * `zoomInUp`\n  * `zoomOut`\n  * `zoomOutDown`\n  * `zoomOutLeft`\n  * `zoomOutRight`\n  * `zoomOutUp`\n  * `slideInDown`\n  * `slideInLeft`\n  * `slideInRight`\n  * `slideInUp`\n  * `slideOutDown`\n  * `slideOutLeft`\n  * `slideOutRight`\n  * `slideOutUp`\n  \n\nWe always keep an up-to-date version on Animate.css. \n\n# Author\nAfshin Mehrabani\n\nThanks to Daniel Eden for making [animate.css](https://github.com/daneden/animate.css)\n\n# License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusablica%2Fkissui.scrollanim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusablica%2Fkissui.scrollanim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusablica%2Fkissui.scrollanim/lists"}