{"id":17068403,"url":"https://github.com/kylestetz/zones","last_synced_at":"2026-03-05T08:32:44.488Z","repository":{"id":19631530,"uuid":"22883520","full_name":"kylestetz/Zones","owner":"kylestetz","description":"A tool for getting the most out of scroll-based animations.","archived":false,"fork":false,"pushed_at":"2014-08-12T15:59:44.000Z","size":116,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-20T13:52:07.262Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kylestetz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-12T15:59:29.000Z","updated_at":"2018-07-30T17:49:31.000Z","dependencies_parsed_at":"2022-08-24T14:01:49.181Z","dependency_job_id":null,"html_url":"https://github.com/kylestetz/Zones","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kylestetz/Zones","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FZones","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FZones/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FZones/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FZones/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kylestetz","download_url":"https://codeload.github.com/kylestetz/Zones/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kylestetz%2FZones/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30115941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T08:19:04.902Z","status":"ssl_error","status_checked_at":"2026-03-05T08:17:37.148Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-14T11:13:21.155Z","updated_at":"2026-03-05T08:32:44.470Z","avatar_url":"https://github.com/kylestetz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Zones\n=====\n\n~ A scrolling animation design pattern.\n\nNo jQuery required!\n\nScroll-dependent animations can be awesome, but they represent an engineering challenge: how do you animate multiple elements from a scroll handler without killing performance? No, your site will probably not crash and catch fire with bad scroll handlers, but the difference between 20-30 frames per second and 60 is very noticeable. Zones is a little pattern for helping to optimize your scrolling animations and, as a result, your website's responsiveness. Use in conjunction with Google Chrome's Timeline tool to get serious about your rendering performance.\n\n**Zones is** a set of functions that provide useful callbacks from scroll events. They have no relationship to the DOM, so you are free to use these tools in whatever way makes sense for you.\n\n**Zones is not** a one-function black magic do-the-animations-for-you plugin. You provide the hard work.\n\nAPI\n===\n\nPass in a top value, a bottom value, and an object with some callbacks. All callbacks are optional.\n\n```javascript\n// in vanilla JS\nnew Zone(top, bottom, options);\nnew Zone(top, bottom, withinCallback);\nnew Zone(top, bottom, options, withinCallback);\n// using zones.jquery.js\n$('#section').Zone(options);\n$('#section').Zone(withinCallback);\n```\n\n```javascript\nvar topValue = 1000;\nvar bottomValue = 4000;\n\nvar myZone = new Zone(topValue, bottomValue, {\n  above: function() {\n    // called once per exit, only when exiting above the zone\n    console.log('We are above the zone.');\n  },\n  below: function() {\n    // called once per exit, only when exiting below the zone\n    console.log('We are below the zone.');\n  },\n  enter: function(value, position) {\n    // called once per entrance\n    console.log('enter');\n  },\n  exit: function() {\n    // called once per exit regardless of the direction\n    console.log('exit');\n  },\n  within: function(value, position) {\n    // called continuously for any position within the zone.\n    // value is a number from 0 - 1 where 0 = topValue and 1 = bottomValue.\n    // position is the window's scroll position, which will go from topValue to bottomValue.\n    console.log('We are in the zone at value: ' + value.toFixed(4) + ' \u0026 position: ' + position);\n  }\n});\n```\n\nYou can also pass a top value, a bottom value, and the `within` callback as a third argument.\nThis is good if you just want the `value` without any entering or exiting callbacks.\n\n```javascript\nvar myZone = new Zone(topValue, bottomValue, function(value, position) {\n  // called continuously for any position within the zone.\n  // value is a number from 0 - 1 where 0 = topValue and 1 = bottomValue.\n  // position is the window's scroll position, which will go from topValue to bottomValue.\n  console.log('We are in the zone at value: ' + value.toFixed(4) + ' \u0026 position: ' + position);\n});\n```\nUsing `zones.jquery.js` in conjunction with `zones.js` we can call `Zone` on a DOM element and a Zone will be created using the top and bottom of the element. `this` is set to the DOM element within each callback.\n\n```javascript\n$('#mySection').Zone({\n  above: function() {\n    // called once per exit, only when exiting above the zone\n    console.log('We are above the zone.');\n  },\n  below: function() {\n    // called once per exit, only when exiting below the zone\n    console.log('We are below the zone.');\n  },\n  enter: function(value, position) {\n    // called once per entrance\n    console.log('enter');\n  },\n  exit: function() {\n    // called once per exit regardless of the direction\n    console.log('exit');\n  },\n  within: function(value, position) {\n    // called continuously for any position within the zone.\n    // value is a number from 0 - 1 where 0 = topValue and 1 = bottomValue.\n    // position is the window's scroll position, which will go from topValue to bottomValue.\n    console.log('We are in the zone at value: ' + value.toFixed(4) + ' \u0026 position: ' + position);\n    console.log('The element in view is:', this);\n  }\n});\n```\n\nPhilosophy\n==========\n\nDon't write jQuery selectors within scroll handlers! Cache everything into variables.\n\nThe `within` callback is where things get animated. This is where you would `transform: translate3d()` and write continuously updating css. Everything else, include adding `show`/`hide` classes, toggling things on and off, and setting up states, should be done in the one-time callbacks `above`, `below`, `enter`, and `exit`.\n\nWrite more \u0026 smaller Zones. Four efficient Zones will outperform one large Zone with four conditional statements and reduce the chance for programmer error.\n\nEasing can be performed by applying an easing function to the `value` passed into the `within` callback. This can be used to create non-linear, bouncey, and generally-less-robotic-looking animations.\n\nTodo\n====\n\nResizing the window will not update the zones. This can be handled for the jQuery plugin but there should be a callback/set of callbacks for dealing with height recalculation on resize for vanilla JS Zones.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylestetz%2Fzones","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkylestetz%2Fzones","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylestetz%2Fzones/lists"}