helium-animated-pages - Vaadin Add-on Directory
A light spiritual succesor to neon-animated-pages using only css animations
# ``
[](https://www.webcomponents.org/element/helium-animated-pages)[](https://badge.fury.io/js/helium-animated-pages)
###### [API](https://github.com/alangdm/helium-animated-pages/wiki/API) | [Demo](https://helium-animated-pages.glitch.me/demo/) | [Using it in `pwa-starter-kit`](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit)
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-element](https://github.com/Polymer/lit-element) 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 (or just use the animations included in the `sample-animations` folder if you don't want to bother with those either �.)
It can be easily used in [pwa-starter-kit](https://github.com/Polymer/pwa-starter-kit/) and [here's how](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit).
To begin using it just follow this 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/helium-animated-pages.js';
```
- Create an instance of `` in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/) and start using it:
```html
Page 1
```
## Credits
Almost all sample animations and the overall 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/).
Select a page
Page 2