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>
      <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">
      <h2>Neon Example</h2>
      <a href = "bower_components/neon-animation/demo/declarative/index.html">Declarative</a>
      <a href = "bower_components/neon-animation/demo/dropdown/index.html">Dropdown</a>
      <a href = "bower_components/neon-animation/demo/grid/index.html">Grid</a>
      <a href = "bower_components/neon-animation/demo/tiles/index.html">Tiles</a>
      <a href = "bower_components/neon-animation/demo/card/index.html">Card</a>


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

polymer serve

Now open the browser and navigate to Following will be the output.

Polymer Neon Element

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 course

Get Started