animated-web-components
v1.1.3
Published
Use Web Components to easily create animations
Downloads
10
Maintainers
Readme
Animated Web Components
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.
Getting started
Using NPM
In you project root
npm install animated-web-components
Then load the content in your html file
<script src="./node_modules/animated-web-components/index.js" type="module">
Using CDN
If you prerfer, you can use [https://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
Usage
Floating Random Thing
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>
Typing element
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.