Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alangdm/helium-animated-pages
A light spiritual succesor to neon-animated-pages using only css animations
https://github.com/alangdm/helium-animated-pages
animations css css-animations html javascript js shadow-dom web-components
Last synced: 5 days ago
JSON representation
A light spiritual succesor to neon-animated-pages using only css animations
- Host: GitHub
- URL: https://github.com/alangdm/helium-animated-pages
- Owner: alangdm
- License: bsd-3-clause
- Created: 2018-05-12T19:40:51.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T18:24:52.000Z (about 1 month ago)
- Last Synced: 2024-10-13T13:01:47.228Z (26 days ago)
- Topics: animations, css, css-animations, html, javascript, js, shadow-dom, web-components
- Language: JavaScript
- Homepage: https://alangdm.github.io/helium-animated-pages/
- Size: 1.46 MB
- Stars: 16
- Watchers: 3
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-lit - `<helium-animated-pages>` - Web component for creating CSS animations built with Lit. (Standalone Components)
README
# ``
[](https://www.webcomponents.org/element/helium-animated-pages)[](https://badge.fury.io/js/helium-animated-pages)
###### [Docs/Demo](https://alangdm.github.io/helium-animated-pages/demo/)
This is a light spiritual successor to the now deprecated [``](https://www.webcomponents.org/element/PolymerElements/neon-animation/elements/neon-animated-pages).
It 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.
This 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. 😉
To begin using it follow these simple steps:
- Install it:
`npm i --save helium-animated-pages`
- Import the script:
In html:
```html
```
In a js module:
```javascript
import 'helium-animated-pages';
```
- Create an instance of `` in your HTML page. You can also use any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/).
```html
/*
Define your animation keyframes and classes
in the same context that contains
<helium-animated-pages>.
You can also use the provided sample animations.
*/
/*
The sample code here only uses a simple
fade animation to keep the code short.
*/
.page-fadeIn {
animation: fadeIn 0.7s ease both;
}
@keyframes fadeIn {
from {
opacity: 0.3;
}
to {
}
}
.page-fadeOut {
animation: fadeOut 0.7s ease both;
}
@keyframes fadeOut {
from {
}
to {
opacity: 0;
}
}
Select a page
Page 1
Page 2
Page 3
Page 1
Page 2
/*
Here's a sample way of switching pages.
You can use a router to do this switching.
*/
document.querySelector('#selector').addEventListener('change', e => {
// Switch pages; you can use the numerical index too.
document.querySelector('#pages').selected = e.target.value;
});
/*
Here we define the "rules" about which CSS classes
should be applied on the different page transitions.
For more info go to:
https://alangdm.github.io/helium-animated-pages/demo/
I'm using CSS classes that aren't actually defined in
this context for illustrative purposes.
You must define every class that you want to use.
*/
document.querySelector('#pages').animationClasses = {
/*
The animation classes rules are like CSS rules:
the most specific ones apply first.
*/
// from page1 to page2
page1_page2: {
in: 'page_moveFromRight',
out: 'page_moveToLeft',
},
// from anything other than page1 to page2
'*_page2': {
in: 'page_moveFromLeft',
out: 'page_moveToRight',
},
// from page1 to anything other than page2
'page1_*': {
in: 'page_moveFromTop',
out: 'page_moveToBottom',
},
// from nothing selected to page1
_page1: {
in: 'page_moveFromBottom',
out: 'page_moveToTop',
},
// fallback in case none of the rules above apply
default: {
in: 'page-fadeIn',
out: 'page-fadeOut',
},
};
```
## Credits
- 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/).
- 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)