- Polymer Tutorial
- Polymer - Home
- Polymer - Overview
- Polymer - Installation
- Polymer - Elements
- Polymer - Custom Elements
- Polymer - Shadow DOM and Styling
- Polymer - Events
- Polymer - Data System
Polymer - Neon Elements
Neon-animation is used to implement animated transitions for Polymer elements by using web animations.
You can use neon-animation in your application, by running the following command to install it in your project directory.
bower install --save PolymerElements/neon-animation
This command will install all the related elements of neon-animation under the bower_components folder.
The following example specifies the use of neon-animation in Polymer.js. Create an index.html file and add the following code in it.
<!doctype html> <html> <head> <title>Polymer Example</title> <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel = "import" href = "bower_components/polymer/polymer.html"> <link rel = "import" href = "bower_components/paper-styles/demo-pages.html"> <link rel = "import" href = "bower_components/neon-animation/web-animations.html"> </head> <body> <h2>Neon Example</h2> <a href = "bower_components/neon-animation/demo/declarative/index.html">Declarative</a> <br> <a href = "bower_components/neon-animation/demo/dropdown/index.html">Dropdown</a> <br> <a href = "bower_components/neon-animation/demo/grid/index.html">Grid</a> <br> <a href = "bower_components/neon-animation/demo/tiles/index.html">Tiles</a> <br> <a href = "bower_components/neon-animation/demo/card/index.html">Card</a> </body> </html>
To run the application, navigate to the created project directory and run the following command.
Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.
Click each link. You will see the different types of animated transitions, which are created using web animations.
Kickstart Your Career
Get certified by completing the courseGet Started