{"id":20503707,"url":"https://github.com/withaarzoo/animated-paper-plane-button","last_synced_at":"2026-04-12T23:54:35.312Z","repository":{"id":190808945,"uuid":"683397367","full_name":"withaarzoo/Animated-Paper-Plane-Button","owner":"withaarzoo","description":"Create an engaging and interactive animated paper plane button with this HTML, CSS, and JavaScript code. When clicked, this button transforms into a paper plane and sends with a success message, adding a delightful touch to your web application.","archived":false,"fork":false,"pushed_at":"2023-08-26T13:40:21.000Z","size":9,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-06T12:34:50.213Z","etag":null,"topics":["css","gsap","html","html-css-javascript","html-css-js-project","js"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withaarzoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-26T12:49:55.000Z","updated_at":"2024-08-05T10:00:18.000Z","dependencies_parsed_at":"2023-08-26T14:29:22.155Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Animated-Paper-Plane-Button","commit_stats":null,"previous_names":["aarzoo75/animated-paper-plane-button","withaarzoo/animated-paper-plane-button"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withaarzoo/Animated-Paper-Plane-Button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Paper-Plane-Button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Paper-Plane-Button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Paper-Plane-Button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Paper-Plane-Button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Animated-Paper-Plane-Button/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Paper-Plane-Button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31734350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T22:19:12.206Z","status":"ssl_error","status_checked_at":"2026-04-12T22:18:33.088Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","gsap","html","html-css-javascript","html-css-js-project","js"],"created_at":"2024-11-15T19:33:45.466Z","updated_at":"2026-04-12T23:54:35.259Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Paper Plane Button\n\nCreate an engaging and interactive animated paper plane button with this HTML, CSS, and JavaScript code. When clicked, this button transforms into a paper plane and sends with a success message, adding a delightful touch to your web application.\n\n## Table of Contents\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Customization](#customization)\n- [License](#license)\n- [Preview](#preview)\n\n## Features\n\n- Engaging and interactive paper plane animation on button click.\n- Success message upon successful completion of the animation.\n- Customizable button styles and animation parameters.\n\n## Installation\n\nTo use this animated paper plane button in your project, follow these steps:\n\n1. **Clone the Repository**:\n\n   Clone this repository to your local machine using Git:\n\n   ```shell\n   git clone https://github.com/your-username/animated-paper-plane-button.git\n   ```\n\n2. **Include the Files**:\n\n   - Copy the `style.css` file to your project's CSS directory.\n   - Copy the `script.js` file to your project's JavaScript directory.\n   - Include the GreenSock Animation Platform (GSAP) library by adding the following script tag to your HTML file:\n\n     ```html\n     \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js\" integrity=\"sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\u003e\u003c/script\u003e\n     ```\n\n## Usage\n\n1. **HTML Structure**:\n\n   In your HTML file, create a button element with the class \"button\" and an anchor element for the Twitter link with the class \"twitter\":\n\n   ```html\n   \u003c!DOCTYPE html\u003e\n   \u003chtml lang=\"en\"\u003e\n   \u003chead\u003e\n       \u003c!-- Add meta tags and title here --\u003e\n       \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n       \u003cbutton class=\"button\"\u003e\n           \u003c!-- Button content goes here --\u003e\n       \u003c/button\u003e\n       \u003c!-- Twitter link --\u003e\n       \u003ca class=\"twitter\" target=\"_blank\" href=\"https://twitter.com/your-twitter-handle\"\u003e\n           \u003c!-- Twitter icon goes here --\u003e\n       \u003c/a\u003e\n       \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n   \u003c/body\u003e\n   \u003c/html\u003e\n   ```\n\n2. **Customization**:\n\n   You can customize the button's appearance and animation parameters by modifying the CSS variables in the `style.css` file. Adjust colors, shapes, and animations to match your design preferences.\n\n3. **Demo Integration**:\n\n   To integrate this animated paper plane button into your project, copy the button's HTML structure from the provided code and add it to your desired web page.\n\n4. **Include JavaScript**:\n\n   Make sure to include the GreenSock Animation Platform (GSAP) library as shown in the installation steps. The `script.js` file contains the JavaScript code responsible for the button's animation.\n\n## Customization\n\nCustomize the button's appearance and animation by modifying the CSS variables in the `style.css` file. Here are some key variables you can adjust:\n\n- `--primary`: Button's primary background color.\n- `--text`: Button's text color.\n- `--trails`: Color of the animated trails.\n- `--success`: Color of the success message.\n- Various animation parameters like duration and timing can be adjusted in the JavaScript code to change the animation's speed and behavior.\n\n## License\n\nThis code is provided under the [MIT License](LICENSE). Feel free to use, modify, and distribute it in your projects. If you find it useful, a star to the repository would be appreciated!\n\n## Preview\n\u003cimg width=\"895\" alt=\"Screenshot 2023-08-26 181616\" src=\"https://github.com/Aarzoo75/Animated-Paper-Plane-Button/assets/59678435/15f95078-7684-4b1a-b883-abc0c90b7ac9\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-paper-plane-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fanimated-paper-plane-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-paper-plane-button/lists"}