{"id":21898490,"url":"https://github.com/canopas/tailwind-animations-examples","last_synced_at":"2025-10-30T07:21:46.212Z","repository":{"id":86025879,"uuid":"546635162","full_name":"canopas/tailwind-animations-examples","owner":"canopas","description":"Cool animations implemented with tailwindcss","archived":false,"fork":false,"pushed_at":"2024-12-30T05:19:27.000Z","size":14042,"stargazers_count":123,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-25T11:05:57.778Z","etag":null,"topics":["animation-css","animation-example","animation-examples","animations","css","tailwind","tailwind-animations","tailwind-animations-examples","tailwind-elements","tailwindcss","tailwindcss-animate","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/canopas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-06T11:55:34.000Z","updated_at":"2025-03-05T00:09:00.000Z","dependencies_parsed_at":"2024-03-27T10:53:07.495Z","dependency_job_id":"b0c19744-ae6b-4312-bf10-c5389a92a48e","html_url":"https://github.com/canopas/tailwind-animations-examples","commit_stats":{"total_commits":19,"total_committers":5,"mean_commits":3.8,"dds":"0.26315789473684215","last_synced_commit":"369725ecf1f657fb73edccde9f37958d7baa3796"},"previous_names":["canopas/tailwind-animations-examples"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/canopas/tailwind-animations-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Ftailwind-animations-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Ftailwind-animations-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Ftailwind-animations-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Ftailwind-animations-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canopas","download_url":"https://codeload.github.com/canopas/tailwind-animations-examples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Ftailwind-animations-examples/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269457772,"owners_count":24420289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"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":["animation-css","animation-example","animation-examples","animations","css","tailwind","tailwind-animations","tailwind-animations-examples","tailwind-elements","tailwindcss","tailwindcss-animate","vuejs"],"created_at":"2024-11-28T14:32:51.280Z","updated_at":"2025-10-30T07:21:41.189Z","avatar_url":"https://github.com/canopas.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://canopas.com/contact\"\u003e\u003cimg src=\"./assets/banner.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# Tailwind Animations Examples\n\nThis repository contains different animations implemented using tailwind css.\n\nWe keep building complex animations using tailwind css. Our goal is to build ready-to-use animation components.\n\n**Note:** This is **NOT component library**. You can copy and paste the code of animations directly from the given links.\n\n## 🚀 [Showcase](https://play.tailwindcss.com/6MLUVcHDy0)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/rotate-square.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/RotateSquare.vue\"\u003e\n      Rotate Square\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/progress-dot.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/ProgressDots.vue\"\u003e\n      Progress Dots\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/heart.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/JumpingHeart.vue\"\u003e\n      Jumping Heart\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/rotate-dot.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/RotateDot.vue\"\u003e\n      Rotate Dot\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/pacman.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/Pacman.vue\"\u003e\n      Pacman\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/three-bounce.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/ThreeBounce.vue\"\u003e\n      Three Bounce\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/arc-rotation.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/ArcRotation.vue\"\u003e\n      Arc Rotation\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/rotate-two-dots.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/RotateTwoDots.vue\"\u003e\n      Rotate Two Dots\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/square-fill.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/SquareFill.vue\"\u003e\n      Square Fill\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/clock.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/Clock.vue\"\u003e\n      Clock\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/rotate-circle.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/RotateCircle.vue\"\u003e\n      Rotate Circle\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/wave.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/Wave.vue\"\u003e\n      Wave\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/twin-circle.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/TwinCircle.vue\"\u003e\n      Twin Circle\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/double-bouncy-circles.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/DoubleBouncyCircles.vue\"\u003e\n      Double Bouncy Circles\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/bouncy-circles.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/BouncyCircles.vue\"\u003e\n      Bouncy Circles\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/dotted-square.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/DottedSquare.vue\"\u003e\n      Dotted Square\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/arrow-forward.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/ForwardingArrow.vue\"\u003e\n      Forwarding Arrow\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/rotating-squares.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/RotatingSquares.vue\"\u003e\n      Rotating Two Squares\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/line-wave.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/LineWave.vue\"\u003e\n      Line Wave\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/canopas/tailwind-animations/blob/master/src/assets/images/triangle-swapping-dots.gif\" width=\"250px\" height=\"250px\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/canopas/tailwind-animations-examples/blob/master/src/components/TriangleSwappingDots.vue\"\u003e\n      Triangle Swapping Dots\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Contribution\n\nThe Canopas team enthusiastically welcomes contributions and project participation! There are a bunch of things you can do if you want to contribute! The [Contributor Guide](CONTRIBUTING.md) has all the information you need for everything from reporting bugs to contributing entire new features. Please don't hesitate to jump in if you'd like to, or even ask us questions if something isn't clear.\n\n# Credits\n\nThis repository is owned and maintained by the [Canopas team](https://canopas.com/). You can follow them on X at [@canopassoftware](https://x.com/canopassoftware) for project updates and releases.\n\n\u003ca href=\"https://canopas.com/contact\"\u003e\u003cimg src=\"./assets/cta.png\" width=300\u003e\u003c/a\u003e\n\n# Licence\n\nThis repository is published under the [GNU V3](https://github.com/canopas/tailwind-animations-examples/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Ftailwind-animations-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanopas%2Ftailwind-animations-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Ftailwind-animations-examples/lists"}