A concept to add airplanes in a airway using Javascript and CSS Animations. Currently this is a a HTML only concept. In the near future we will add a Lib to abstract this and provide a way to use it in a React App.
- Clone the repo
git clone https://github.com/ruymon/airway-animation.gitObservation: if you have the Github CLI installed you can use the following command to clone the repo.
gh repo clone ruymon/airway-animation-
Open the index.html file and
-
If you wish to add custom config to the animation, add your configurations in the airway.js file.
const customConfig = {
// Your Configurations!
};All configurations possibilities:
const customConfig = {
background: '#282828', // Background color of the container. This property can be a HEX; RGB; RGBA or a color name. If not set, the default background color is transparent.
height: 500, // Height of the container as a number. If not set, the deault value is 130px.
resizable: false, // Resizable container boolean. If set to true, the container will be resizable.
colorFromLeft: 'blue', // Color for the aircraft coming from the left. This property can be a HEX; RGB; RGBA or a color name. If not set, the default color is blue.
colorFromRight: 'red', // Color for the aircraft coming from the right. This property can be a HEX; RGB; RGBA or a color name. If not set, the default color is red.
lazy: true, // Lazy Mode is a boolean. If set to true, airplanes will spawn slowly (incrementally). If set to false, all airplanes will spawn at once when the page loads.
log: false, // Log Mode or Developer Mode. If set to true, the console will log the events. If set to false, the console will not log the events.
};In this starter version there is a container div that will be used to inject airplanes.
<div id="airwayGrid"></div>- Convert to TypeScript
interface configTypes {
background: 'transparent' | string;
height: number;
resizable: boolean;
colorFromLeft: string[] | string | 'random'; // Nice feature to add: 'random'.
colorFromRight: string[] | string | 'random'; // Nice feature to add: 'random'.
lazy: boolean;
log: boolean;
}- Create a Lib to use a component in a React Project:
This example will demonstrate how this could be used as a component in a React Project:
```jsx
import React from 'react';
import AirwayAnimation from 'airway-animation';
const config = {
maxLimit: 'container',
background: 'transparent',
resizable: true,
colorFromLeft: '#a339e3',
colorFromRight: '#2ec662',
};
function sampleData() {
return <AirwayAnimation config={config} />;
}
export default sampleData;If you wish to contribute to this project: Bug Fixes; Updating Docs; or any update at all, you can follow this guide:
-
Fork this repo;
-
Find this fork inside your github project.
-
Create a new branch with your modifications. 💡 Tip: To create a new branch use the command:
git checkout -b my-branch
-
Make your modifications.
-
Commit your modifications. 💡 Tip: To commit use the command:
git commit -m 'feat: My new feature'- Push your branch: 💡 Tip: To push your branch use the command:
git push origin my-branch🎉 Tada! Now the only thing left to do is to open a pull request of your fork and I will be glad to analyze your contribution!;
MIT © Ruy Monteiro. This project is under the MIT Licence. Check the LICENSE file for more details.
Made with ♥ by Ruy Monteiro 👋