{"id":22691056,"url":"https://github.com/nigelotoole/direction-reveal","last_synced_at":"2025-10-06T01:07:52.300Z","repository":{"id":24847474,"uuid":"102586114","full_name":"NigelOToole/direction-reveal","owner":"NigelOToole","description":"Detects the direction a user enters or leaves an element allowing you to reveal or hide content based on this direction.","archived":false,"fork":false,"pushed_at":"2023-01-27T04:26:26.000Z","size":1426,"stargazers_count":523,"open_issues_count":6,"forks_count":39,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-04T12:29:01.098Z","etag":null,"topics":["es6","es6-modules","gallery","hover","hover-effects","javascript","reveal","sass","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"http://nigelotoole.github.io/direction-reveal/","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/NigelOToole.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":"2017-09-06T08:53:48.000Z","updated_at":"2025-04-01T01:29:36.000Z","dependencies_parsed_at":"2023-02-15T05:16:25.558Z","dependency_job_id":null,"html_url":"https://github.com/NigelOToole/direction-reveal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NigelOToole%2Fdirection-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NigelOToole%2Fdirection-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NigelOToole%2Fdirection-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NigelOToole%2Fdirection-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NigelOToole","download_url":"https://codeload.github.com/NigelOToole/direction-reveal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182388,"owners_count":20897381,"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":["es6","es6-modules","gallery","hover","hover-effects","javascript","reveal","sass","vanilla-javascript","vanilla-js"],"created_at":"2024-12-10T01:09:18.855Z","updated_at":"2025-10-06T01:07:47.264Z","avatar_url":"https://github.com/NigelOToole.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Direction Reveal\n### A plugin that detects the direction a user enters or leaves an element allowing you to reveal or hide content based on this direction.\n\n### [View demo](http://nigelotoole.github.io/direction-reveal/)\n\n\n\n## Installation\n```javascript\n$ npm install direction-reveal --save-dev\n```\n\n\n## Usage\n\n### Import JS\n\nThe script is an ES6(ES2015) module but the compiled version is included in the build as \"src/scripts/direction-reveal-umd.js\". You can also copy \"src/scripts/direction-reveal.js\" into your own site if your build process can accommodate ES6 modules.\n\n```javascript\nimport DirectionReveal from 'direction-reveal';\n\n// Init with default setup\nconst directionRevealDemo = DirectionReveal();\n\n// Init with all options at default setting\nconst directionRevealDefault = DirectionReveal({\n  selector: '.direction-reveal',\n  itemSelector: '.direction-reveal__card',\n  animationName: 'swing',\n  animationPostfixEnter: 'enter',\n  animationPostfixLeave: 'leave',\n  enableTouch: true,\n  touchThreshold: 250\n});\n```\n\n### Options\n| Property                | Default                     | Type       | Description                                                                                       |\n| ----------------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------- |\n| `selector`              | '.direction-reveal'         | String     | Container element selector.                                                                       |\n| `itemSelector`          | '.direction-reveal\\_\\_card' | String     | Item element selector.                                                                            |\n| `animationName`         | 'swing'                     | String     | Animation class.                                                                                  |\n| `animationPostfixEnter` | 'enter'                     | String     | Animation CSS class postfix for enter event.                                                      |\n| `animationPostfixLeave` | 'leave'                     | String     | Animation CSS class postfix for leave event.                                                      |\n| `enableTouch`           | true                        | Boolean    | Adds touch event to show content on first click then follow link on the second click.             |\n| `touchThreshold`        | 250                         | Number(ms) | The touch length in ms to trigger the reveal, this is to prevent triggering if user is scrolling. |\n\n\n### Import SASS\n\n```scss\n@import \"node_modules/direction-reveal/src/styles/direction-reveal.scss\";\n```\n\n\n### Markup\n\n```html\n\u003cdiv class=\"direction-reveal\"\u003e\n\n  \u003ca href=\"#\" class=\"direction-reveal__card\"\u003e\n    \u003cimg src=\"images/image.jpg\" alt=\"Image\" class=\"img-fluid\"\u003e\n\n    \u003cdiv class=\"direction-reveal__overlay direction-reveal__anim--enter\"\u003e\n      \u003ch3 class=\"direction-reveal__title\"\u003eTitle\u003c/h3\u003e\n      \u003cp class=\"direction-reveal__text\"\u003eDescription text.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\n  ...\n\u003c/div\u003e\n```\n\n\n### Using other tags\nThe demos use \u0026lt;a\u0026gt; tags for the \"direction-reveal__card\" but a \u0026lt;div\u0026gt; can be used as below, specifying the tabindex ensures keyboard navigation works as expected. They can all have a value of 0 and will follow the source order of the divs.\n\n```html\n\u003cdiv class=\"direction-reveal__card\" tabindex=\"0\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n### Inverted animations\n\nMost of the animations above can be inverted so the overlay is visible by default and animates out on hover. Change the class 'direction-reveal__anim--enter' to 'direction-reveal__anim--leave' for this effect.\n\nYou can also add the class 'direction-reveal__anim--enter' or 'direction-reveal__anim--leave' to the image to animate it at the same time as overlay. This effect can be seen in the Slide \u0026 Push demo.\n\n## Events\n\nA 'directionChange' event is broadcast once a user enters/leaves an item with information about the action(enter,leave) and direction(top, right, bottom, left).\n\n```javascript\ndocument.querySelector('#test').addEventListener('directionChange', (event) =\u003e { \n  console.log(`Action: ${event.detail.action} Direction: ${event.detail.direction}`);\n});\n```\n\n## Compatibility\n\n### Touch support\nThe plugin will detect touch support and reveal the hidden content on first click then follow link on the second click. This can be disabled with the option enableTouch.\n\n\n### Browser support\nSupports all modern browsers(Firefox, Chrome and Edge) released as of January 2018. For older browsers you may need to include polyfills for [Nodelist.forEach](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach), [Element.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and [Passive Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).\n\n\n\n## Demo site\nClone or download from Github.\n\n```javascript\n$ npm install\n$ gulp serve\n```\n\n### Credits\n\nInspired by a Codepen by [Noel Delgado](https://codepen.io/noeldelgado/pen/pGwFx), this [Stack overflow answer](https://stackoverflow.com/a/3647634), the article [Get an Element's position using javascript](https://www.kirupa.com/html5/get_element_position_using_javascript.htm) and [Images from Unsplash.](https://unsplash.com).\n\n\n### License\nMIT © Nigel O Toole\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigelotoole%2Fdirection-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigelotoole%2Fdirection-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigelotoole%2Fdirection-reveal/lists"}