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.

Example

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>

Output

To run the application, navigate to the created project directory and run the following command.

polymer serve

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.

polymer_elements.htm

Kickstart Your Career

Get certified by completing the course

Get Started