{"id":20503611,"url":"https://github.com/withaarzoo/upload-animation-with-gsap","last_synced_at":"2026-06-09T14:31:31.598Z","repository":{"id":181972290,"uuid":"667745734","full_name":"withaarzoo/Upload-Animation-with-GSAP","owner":"withaarzoo","description":"This code demonstrates an upload animation implemented using GSAP (GreenSock Animation Platform). It provides a button with an upload icon and progress indication, which transforms into a progress bar during the upload process.","archived":false,"fork":false,"pushed_at":"2023-07-18T08:17:15.000Z","size":12,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-06T12:34:55.988Z","etag":null,"topics":["css","html","javascript","upload-button"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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-07-18T07:59:18.000Z","updated_at":"2023-07-18T17:05:19.000Z","dependencies_parsed_at":"2023-07-30T11:16:29.584Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Upload-Animation-with-GSAP","commit_stats":null,"previous_names":["aarzoo75/upload-animation-with-gsap","withaarzoo/upload-animation-with-gsap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withaarzoo/Upload-Animation-with-GSAP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FUpload-Animation-with-GSAP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FUpload-Animation-with-GSAP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FUpload-Animation-with-GSAP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FUpload-Animation-with-GSAP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Upload-Animation-with-GSAP/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FUpload-Animation-with-GSAP/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34112225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","html","javascript","upload-button"],"created_at":"2024-11-15T19:32:57.858Z","updated_at":"2026-06-09T14:31:31.583Z","avatar_url":"https://github.com/withaarzoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Upload Animation with GSAP\nThis code demonstrates an upload animation implemented using GSAP (GreenSock Animation Platform). It provides a button with an upload icon and progress indication, which transforms into a progress bar during the upload process. After the upload completes, the button transitions into a checkmark animation to indicate a successful upload. The animation effects are achieved using CSS and GSAP library.\n\n## How to Use\nTo use this code, follow these steps:\n\n1. Include the 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\n2. Copy and paste the provided CSS and JS code into separate files, such as `style.css` and `script.js`, respectively.\n\n3. Link the CSS file by adding the following link tag inside the head section of your HTML file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n```\n4. Add the JavaScript file by adding the following script tag just before the closing body tag of your HTML file:\n\n```html\n\u003cscript src=\"script.js\" defer\u003e\u003c/script\u003e\n```\n5. Customize the animation properties by modifying the CSS variables defined in the `:root` selector of the CSS code. You can adjust the button size, colors, progress bar dimensions, and more according to your preference.\n\n6. Save the files and open the HTML file in a web browser. You should now see the upload button with the animation effect.\n\n7. Click on the upload button to trigger the animation. The button will transform into a progress bar, indicating the progress of the upload. After completion, the button will transition into a checkmark animation.\n\n8. After 5 seconds, the button and container will return to their original state, ready for another upload.\n\n## Dependencies\nThis code relies on the following dependencies:\n\n* [GSAP](https://greensock.com/gsap/) A powerful JavaScript animation library used to create smooth and performant animations.\n  \nMake sure to include the GSAP library using the provided script tag or by downloading it from the GSAP website.\n\n## Compatibility\nThe code provided is compatible with modern web browsers that support HTML5, CSS3, and JavaScript. It utilizes GSAP's animation capabilities, so it requires a browser with JavaScript enabled.\n\n## Preview\n\u003cimg width=\"960\" alt=\"Screenshot 2023-07-18 134651\" src=\"https://github.com/Aarzoo75/Upload-Animation-with-GSAP/assets/59678435/7224f21f-5664-4bc8-bf27-1ac4da01fb3a\"\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fupload-animation-with-gsap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fupload-animation-with-gsap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fupload-animation-with-gsap/lists"}