{"id":21831701,"url":"https://github.com/w99910/anime-scrolltrigger","last_synced_at":"2025-03-21T13:23:37.862Z","repository":{"id":206643862,"uuid":"717359271","full_name":"w99910/anime-scrolltrigger","owner":"w99910","description":"Animate on scroll","archived":false,"fork":false,"pushed_at":"2024-01-26T03:20:05.000Z","size":5617,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-26T13:22:25.339Z","etag":null,"topics":["animate-on-scroll","animation","anime-scrolltrigger","scroll","scroll-trigger"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/anime-scrolltrigger","language":"JavaScript","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/w99910.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2023-11-11T08:24:36.000Z","updated_at":"2024-03-24T09:00:51.000Z","dependencies_parsed_at":"2023-11-13T09:24:00.622Z","dependency_job_id":"99837e45-fb28-4110-a40d-79afeca1dd66","html_url":"https://github.com/w99910/anime-scrolltrigger","commit_stats":null,"previous_names":["w99910/scrollanime","w99910/anime-scrolltrigger"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w99910%2Fanime-scrolltrigger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w99910%2Fanime-scrolltrigger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w99910%2Fanime-scrolltrigger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w99910%2Fanime-scrolltrigger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w99910","download_url":"https://codeload.github.com/w99910/anime-scrolltrigger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244804135,"owners_count":20513056,"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":["animate-on-scroll","animation","anime-scrolltrigger","scroll","scroll-trigger"],"created_at":"2024-11-27T19:14:21.923Z","updated_at":"2025-03-21T13:23:37.823Z","avatar_url":"https://github.com/w99910.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Anime-ScrollTrigger\n\n![Anime-ScrollTrigger](cover.jpg)\n\n## Features\n\n- Trigger animation when scroller offset intersects with trigger element.\n- Support Scroll Triggering without the need of using animation ( i.e you can still use scroll trigger when you don't want to animate) \n- Pinning trigger element\n- Option for [linear interpolation](https://en.wikipedia.org/wiki/Linear_interpolation) of animation based on scroll.\n  i.e, trigger animation state based on scroll\n- Smoothing animation when `lerp` is enabled. \n- Debugging the offset markers.\n- Calculates offsets using `boundingClientRect` and `scrollTop` instead of using `Intersection Observer`.\n\nDemo codepen: [https://codepen.io/Zaw-Lin-Tun-the-encoder/pen/vYbervK](https://codepen.io/Zaw-Lin-Tun-the-encoder/pen/vYbervK)\n\n\n## Table Of Contents\n\n- [Features](#features)\n- [Introduction](#introduction)\n- [Understanding How Trigger Works](#understanding-how-trigger-works)\n- [Changelogs](#changelogs)\n- [Installation](#installation)\n- [Usages](#usages)\n  - [Import](#import-animescrolltrigger)\n  - [Init](#create-an-instance)\n  - [Animation](#animation)\n  - [ScrollTrigger](#scroll-trigger)\n- [Examples](#examples)\n- [Tips And Mistakes](#tips-and-mistakes)\n- [ToDO](#to-do)\n\n## Introduction\n\n`Anime-ScrollTrigger` is a library which is aimed to animate on scroll just\nlike [`ScrollTrigger`](https://gsap.com/docs/v3/Plugins/ScrollTrigger/). Some name conventions would be different but\nthe logic is pretty similar.\n\nI strongly recommend you to use that library because it is awesome and maintained.\n\nI don’t know how exactly that library is implemented in the context of coding. I only have abstract ideas of that\nlibrary and tried to create my own one based on those ideas.\n\n\u003e 💡 The animation system of this library is solely dependent on [`animejs`](https://animejs.com/) library. So basic hands-on knowledge of `animejs` would help you.\n\nMost of usages are similar to [`ScrollTrigger`](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) . Please have a look at\nthe following instructions.\n\n## Understanding How Trigger Works\n\nIt's important to know that there are two types of trigger offsets ( trigger positions ):\n\n- trigger element: start offset `startTriggerOffset` and end offset `endTriggerOffset`:\n\n  Offsets are calculated on [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) of the trigger element\n  relative to the [top](https://developer.mozilla.org/en-US/docs/Web/API/Window/top) of the trigger element. You can\n  change the value with **first** word of `start` or `end` attribute under `scrollTrigger` attribute.\n- scroller/container element: start offset `startScrollerOffset` and end offset `endScrollerOffset`.\n\n  Offsets are calculated relative\n  to [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) of the scroller element. You\n  can change the value with **second** word of `start` or [`end`](#) attribute under `scrollTrigger` attribute.\n\nTrigger will start when `startTriggerOffset` meets `startScrollerOffset`.\nTrigger will end when `endTriggerOffset` meets `endScrollerOffset`.\nFor example,\n\n   ```js\n   ...\n   scrollTrigger: {\n      start: 'top bottom', \n      end: '10% bottom',\n   }\n   ```\n\nThe above values indicate that\n\n- animation will start when `the top` of trigger element and the `bottom end` of scroller meets.\n- animation will end when `10% of the trigger element height + top` of trigger element and `bottom end` of scroller\n  meets.\n\n## Changelogs\n\nRead Changelog [here](CHANGELOG.md)\n\n\n## Installation\n\nUse `npm`\n\n```bash\nnpm install anime-scrolltrigger\n```\n\nOr `cdn`\n\n```js\nimport AnimeScrollTrigger from 'https://cdn.jsdelivr.net/npm/anime-scrolltrigger@{enter version e.g, 0.1.0}/dist/anime-scrolltrigger.es.js';\n```\n\n## Usages\n\n### Import `AnimeScrolltrigger`\n\n```js\nimport AnimeScrollTrigger from 'anime-scrolltrigger' \n```\n\n### Create an instance.\n\n- container: Scroller HTML element\n- animations: Array of [animation object](#animation)\n\n```js\nlet container = document.getElementById('container');\nlet boxes = document.querySelectorAll('.box')\nlet animations = [\n    {\n        targets: boxes[0],\n        translateX: 100,\n        easing: 'linear',\n        scrollTrigger: {\n            trigger: boxes[0],\n            start: 'top 3%',\n            end: 'bottom 30%',\n        }\n    }, {\n        targets: boxes[1],\n        backgroundColor: '#a993ff',\n        easing: 'linear',\n        scrollTrigger: {\n            trigger: boxes[1],\n            start: 'top 40%',\n            end: 'bottom center',\n            lerp: true,\n        }\n    }];\n\nnew AnimeScrollTrigger(container, animations);\n```\n\n### Animation\n\nAnimation object has the following structure.\n\n- targets (optional) : HTML elements to animate\n- attributes (optional) which you want to animate ( same as animejs) - for example\n  ```js\n  {\n    translateX: 100,\n    backgroundColor: 100,\n    ...\n  }\n  ```\n- scrollTrigger: [scroll trigger object](#scroll-trigger)\n\n---\nExample Animation Object\n\n```js\n{\n    targets: boxes[1], \n    backgroundColor: '#a993ff',\n    easing: 'linear',\n    scrollTrigger: {\n    ...\n    }\n}\n```\n\n### Scroll Trigger\n\n- #### trigger: `HTMLElement`\n\n- #### start: `String`\n\n  Indicate where `startTriggerOffset` of `trigger` element will intersect with `startScrollerOffset` of `scroller` element and when it intersects, animation will *\n  *start**.\n  Format is `\"start-trigger-offset start-scroller-offset\"`.\n  Default value is `\"top center\"`.\n  \u003e Offset can be provided as percentage (e.g. 10%, 20%, -5%) or constant values: top, center, bottom.\n\n- #### end: `String`\n\n  Indicate where `endTriggerOffset` will intersect with `endScrollerOffset` and when it intersects, animation will **end\n  **.  \n  Format is `\"end-trigger-offset end-scroller-offset\"`.\n  Default value is `\"bottom center\"`.\n  \u003e Offset can be provided as percentage (e.g. 10%, 20%, -5%) or constant values: top, center, bottom.\n\n- #### actions: `String`\n\n  Action behavior when a certain event is triggered. Format\n  is `\"on-enter-action on-leave-action on-enter-back-action on-leave-back-action\"`. Default value is \"play none none\n  reverse\".\n  \u003e Note: when `lerp` is enabled, user-defined `on-enter-action` and `on-enter-back-action` will be ignored which means\n  that animation will be forwarded on scrolling down and backwarded on scrolling up.\n\n- #### lerp: `Boolean`\n\n  Lerp ( linear interpolation) enables progressive transition of animation which means that animation state will be\n  triggered based on scroll position instead of triggering at once when scroller reach trigger start offset.\n\n- #### smooth: `Boolean`\n\n  When you enable `lerp`, the default behavior is that the animation will be triggered as `linear` easing ( which means that you will not see any smoothness or easing in the animation). \n\n  Thus, in order to make the animation `smooth`, you can enable this option.\n  Default is `false`. \n\n  \u003e Default easing method is `easeOutQuart` but if you provide `easing` attribute in the animation, provided `easing` will be used. \n\n- #### pin: `Boolean` or `String` or `HTMLElement` or `Object`\n\n  Pinning will pin the trigger element to the top of container element. Pinning state will start when it reaches\n  animation-trigger-start-offset and ends when it reaches animation-trigger-end-offset.\n\n  A pinned element should exist **equal or below** `top` of the trigger element so that it will pin the element when trigger element is reached.\n\n  If you want to provide top offset, you can provide it as an object attribute. \n  ```js\n  pin: {\n    element: '.pin-Element',\n    top: 20,\n  }\n  ```\n\n- #### debug: `Boolean` or `Object`\n\n  Indicate to show start offset markers and end offset markers in order to see where they are located visually.\n  You can pass object in order to `change markers color`.\n  ```js\n  debug: { \n     startTriggerOffsetMarker: '#f6a945',\n     endTriggerOffsetMarker: '#ffd291',\n     startScrollerOffsetMarker: '#4b45f6',\n     endScrollerOffsetMarker: '#d5d4ff',\n  }\n  ```\n\n- #### events: `Object`\n\n  Events triggered on scroll.\n    - onEnter:\n    - onLeave:\n    - onEnterBack:\n    - onLeaveBack:\n    - onUpdate:\n\n---\nExample scroll trigger object is\n\n```js\n{\n    trigger: boxes[1],\n    start: 'top 40%',\n    end: 'bottom center',\n    lerp: true,\n    debug: true,\n    pin: false,\n    actions: 'play none none reverse',\n    events:\n        { // Scroll Trigger Events\n            onEnter: (trigger) =\u003e {},\n            onLeave: (trigger) =\u003e {},\n            onEnterBack: (trigger) =\u003e {},\n            onLeaveBack: (trigger) =\u003e {},\n            onUpdate: (trigger,progress) =\u003e {},\n        }\n}\n```\n\n## Examples\n\n- [simple-boxes](./examples/simple-boxes.html)\n\n## Tips and mistakes\n\n- Sometimes when the animation is not working, make sure that container element you provided is actually scrolling.\n  You may want to listen to scroll event of that element.\n  ```js\n  container.addEventListener('scroll',()=\u003econsole.log('yay scrolling'))\n  ```\n- The start-intersection-trigger-offset needs to be lower than end-intersection-trigger-point offset. If it is not, animation/ triggering won't work. \n- Incorrect trigger offsets could probably happen because of initializing trigger before dom tree hasn't completed building yet. So workaround might be setting timeout.\n  ```js\n  setTimeout(()=\u003e{\n    new AnimeScrollTrigger(element,animations)\n  },300)\n  ```\n## TO-DO\n\n- [x] configurable marker colors\n- [x] pin option\n    - it should pin the target element to trigger element until it reaches animation-end-offset\n- [ ] test on horizontal scroll\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw99910%2Fanime-scrolltrigger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw99910%2Fanime-scrolltrigger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw99910%2Fanime-scrolltrigger/lists"}