{"id":13805545,"url":"https://github.com/alangdm/helium-animated-pages","last_synced_at":"2025-04-02T03:31:23.808Z","repository":{"id":32424495,"uuid":"133177957","full_name":"alangdm/helium-animated-pages","owner":"alangdm","description":"A light spiritual succesor to neon-animated-pages using only css animations","archived":false,"fork":false,"pushed_at":"2025-02-21T19:48:41.000Z","size":1709,"stargazers_count":16,"open_issues_count":16,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-22T08:46:36.741Z","etag":null,"topics":["animations","css","css-animations","html","javascript","js","shadow-dom","web-components"],"latest_commit_sha":null,"homepage":"https://alangdm.github.io/helium-animated-pages/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alangdm.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-12T19:40:51.000Z","updated_at":"2023-08-22T10:23:29.000Z","dependencies_parsed_at":"2023-10-19T20:37:25.328Z","dependency_job_id":"d16a1054-237b-4a5d-97c6-e59feebb0ca7","html_url":"https://github.com/alangdm/helium-animated-pages","commit_stats":{"total_commits":218,"total_committers":5,"mean_commits":43.6,"dds":"0.47706422018348627","last_synced_commit":"4229dd39a82dae0a28e6e48d73f09065eb750f04"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fhelium-animated-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fhelium-animated-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fhelium-animated-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fhelium-animated-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alangdm","download_url":"https://codeload.github.com/alangdm/helium-animated-pages/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246746932,"owners_count":20827061,"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":["animations","css","css-animations","html","javascript","js","shadow-dom","web-components"],"created_at":"2024-08-04T01:01:02.167Z","updated_at":"2025-04-02T03:31:23.097Z","avatar_url":"https://github.com/alangdm.png","language":"JavaScript","funding_links":[],"categories":["Standalone Components"],"sub_categories":[],"readme":"# `\u003chelium-animated-pages\u003e`\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/helium-animated-pages)[![npm version](https://badge.fury.io/js/helium-animated-pages.svg)](https://badge.fury.io/js/helium-animated-pages)\n\n###### [Docs/Demo](https://alangdm.github.io/helium-animated-pages/demo/)\n\nThis is a light spiritual successor to the now deprecated [`\u003cneon-animated-pages\u003e`](https://www.webcomponents.org/element/PolymerElements/neon-animation/elements/neon-animated-pages).\n\nIt works with CSS animations and only depends on [lit](https://www.npmjs.com/package/lit). So, you don't have to worry about including any heavy JS libraries.\n\nThis component takes care of the logic behind triggering the animations so that you can focus on making your views and your animations. Alternatively, you can use the animations included in the `sample-animations` folder. 😉\n\nTo begin using it follow these simple steps:\n\n- Install it:\n\n  `npm i --save helium-animated-pages`\n\n- Import the script:\n\n  In html:\n\n  ```html\n  \u003c!-- type=\"module\" is essential --\u003e\n  \u003cscript type=\"module\" src=\"node_modules/helium-animated-pages\"\u003e\u003c/script\u003e\n  ```\n\n  In a js module:\n\n  ```javascript\n  import 'helium-animated-pages';\n  ```\n\n- Create an instance of `\u003chelium-animated-pages\u003e` in your HTML page. You can also use any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/).\n\n  ```html\n  \u003cstyle\u003e\n    /*\n      Define your animation keyframes and classes\n        in the same context that contains\n        \u003chelium-animated-pages\u003e.\n      You can also use the provided sample animations.\n    */\n    /*\n      The sample code here only uses a simple\n        fade animation to keep the code short.\n    */\n    .page-fadeIn {\n      animation: fadeIn 0.7s ease both;\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0.3;\n      }\n      to {\n      }\n    }\n    .page-fadeOut {\n      animation: fadeOut 0.7s ease both;\n    }\n    @keyframes fadeOut {\n      from {\n      }\n      to {\n        opacity: 0;\n      }\n    }\n  \u003c/style\u003e\n  \u003csection\u003e\n    \u003ch2\u003eSelect a page\u003c/h2\u003e\n    \u003cselect id=\"selector\"\u003e\n      \u003coption value=\"page1\"\u003ePage 1\u003c/option\u003e\n      \u003coption value=\"page2\"\u003ePage 2\u003c/option\u003e\n      \u003coption value=\"page3\"\u003ePage 3\u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/section\u003e\n  \u003c!--\n    Use attrForSelected to define which attribute will\n      act as the identifier for the pages.\n    You can also opt to not use it and use numerical indexes instead.\n  --\u003e\n  \u003chelium-animated-pages id=\"pages\" attrForSelected=\"name\"\u003e\n    \u003c!-- The pages can be almost anything --\u003e\n    \u003csection name=\"page1\"\u003ePage 1\u003c/section\u003e\n    \u003cdiv name=\"page2\"\u003ePage 2\u003c/div\u003e\n    \u003ccustom-element name=\"page3\"\u003e\u003c/custom-element\u003e\n  \u003c/helium-animated-pages\u003e\n  \u003cscript\u003e\n    /*\n      Here's a sample way of switching pages.\n      You can use a router to do this switching.\n    */\n    document.querySelector('#selector').addEventListener('change', e =\u003e {\n      // Switch pages; you can use the numerical index too.\n      document.querySelector('#pages').selected = e.target.value;\n    });\n    /*\n      Here we define the \"rules\" about which CSS classes\n        should be applied on the different page transitions.\n      For more info go to:\n        https://alangdm.github.io/helium-animated-pages/demo/\n      I'm using CSS classes that aren't actually defined in\n        this context for illustrative purposes.\n      You must define every class that you want to use.\n    */\n    document.querySelector('#pages').animationClasses = {\n      /*\n        The animation classes rules are like CSS rules:\n          the most specific ones apply first.\n      */\n      // from page1 to page2\n      page1_page2: {\n        in: 'page_moveFromRight',\n        out: 'page_moveToLeft',\n      },\n      // from anything other than page1 to page2\n      '*_page2': {\n        in: 'page_moveFromLeft',\n        out: 'page_moveToRight',\n      },\n      // from page1 to anything other than page2\n      'page1_*': {\n        in: 'page_moveFromTop',\n        out: 'page_moveToBottom',\n      },\n      // from nothing selected to page1\n      _page1: {\n        in: 'page_moveFromBottom',\n        out: 'page_moveToTop',\n      },\n      // fallback in case none of the rules above apply\n      default: {\n        in: 'page-fadeIn',\n        out: 'page-fadeOut',\n      },\n    };\n  \u003c/script\u003e\n  ```\n\n## Credits\n\n- Almost all sample animations and the general flow of the page selection are based on an article by [Pedro Botelho@Codrops](https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/).\n- The docs are powered by [@web-padawan's](https://github.com/web-padawan) [api-viewer-element](https://www.npmjs.com/package/api-viewer-element) and [@runem's](https://github.com/runem) [web-component-analyzer](https://www.npmjs.com/package/web-component-analyzer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falangdm%2Fhelium-animated-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falangdm%2Fhelium-animated-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falangdm%2Fhelium-animated-pages/lists"}