Content on the web is increasingly less static. However adding even simple animations can be repetitive and verbose. This library uses Web Components to provide animations to objects inside a page. Still in development, more will be added soon.
To clone and run this, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
$ git clone https://github.com/edvilme/animated-web-components.git
$ cd animated-web-components
$ npm install animated-web-components
<script src="./node_modules/animated-web-components/index.js" type="module">
If you prerfer, you can use Unpkg.com
<script src="://unpkg.com/animated-web-components/index.js" type="module">
Important! The script is to be executed as a module regardless of the installation
Use this tag to make its content float around its parent. Can be set to duplicate on click
<section>
<floating-random-thing animation-range="20" animation-speed="100" duplicates="true" auto="true">
<p>Hello</p>
</floating-random-thing>
</section>
Use this tag to make a text content appear as if it were being typed.
<section>
<typing-element animation-speed="0.1" animation-enabled="true">
<p>Hello World!</p>
</typing-element>
</section>
Rich HTML can also be used to display complex content:
<section>
<typing-element animation-speed="0.1" animation-enabled="true">
<div>
<h1>Web Technologies</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascrtip</li>
</ul>
</div>
</typing-element>
</section>
Important! Remember that all children must be wrapped in a single tag.
- Clone repo and create a new branch:
$ git checkout https://github.com/edvilme/animated-web-components.git -b name_for_new_branch
- Make changes and test
- Submit Pull Request with comprehensive description of changes
GPL-3.0
Eduardo Villalpando Mello |
Anthony E. Alvarez |
Muhammad Izhar |
Jiteshj2 |
Smollet777 |