Add some advanced animations

Author: cp-dharti-r

README.md

@@ -4,7 +4,7 @@ This repository contains different animations implemented using tailwind css.
 
 We keep building complex animations using tailwind css. Our goal is to build ready-to-use animation components.
 
-## 🚀  [Showcase](https://play.tailwindcss.com/6MLUVcHDy0)
+## 🚀 [Showcase](https://play.tailwindcss.com/6MLUVcHDy0)
 
 <table>
  <tr>
@@ -75,21 +75,50 @@ We keep building complex animations using tailwind css. Our goal is to build rea
   Wave
  </td>
  </tr>
-  <tr>
+ <tr>
  <td align="center">
   <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/twin-circle.gif" width="250px" height="250px">
   <br />
   Twin Circle
  </td>
- </tr>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/double-bouncy-circles.gif" width="250px" height="250px">
+  <br />
+  Double Bouncy Circles
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/bouncy-circles.gif" width="250px" height="250px">
+  <br />
+  Bouncy Circles
+ </td>
+ </tr>
+ <tr>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/dotted-square.gif" width="250px" height="250px">
+  <br />
+  Dotted Square
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/arrow-forward.gif" width="250px" height="250px">
+  <br />
+  Forwarding Arrow
+ </td>
+ <td align="center">
+  <img src="https://github.com/canopas/tailwind-animations/blob/main/src/assets/images/rotating-squares.gif" width="250px" height="250px">
+  <br />
+  Double Squares
+ </td>
+ </tr>
 </table>
 
 # Bugs and Feedback
+
 For bugs, questions and discussions please use the [Github Issues](https://github.com/canopas/tailwind-animations/issues).
 
 # Credits
+
 This repository owned and maintained by the [Canopas team](https://canopas.com/). You can follow them on Twitter at [@canopassoftware](https://twitter.com/canopassoftware) for project updates and releases.
 
- # Licence
+# Licence
 
 This repository is published under the [GNU V3](https://github.com/canopas/tailwind-animations/blob/master/LICENSE.md).

src/App.vue

@@ -12,10 +12,15 @@ import Clock from "./components/Clock.vue";
 import Wave from "./components/Wave.vue";
 import TwinCircle from "./components/TwinCircle.vue";
 import Pacman from "./components/Pacman.vue";
+import DoubleBouncyCircles from "./components/DoubleBouncyCircles.vue";
+import BouncyCircles from "./components/BouncyCircles.vue";
+import DottedSquare from "./components/DottedSquare.vue";
+import ForwardingArrow from "./components/ForwardingArrow.vue";
+import RotatingSquares from "./components/RotatingSquares.vue";
 </script>
 
 <template>
- <div class="h-screen my-20 flex flex-wrap container m-16">
+ <div class="flex flex-wrap m-16">
  <RotateSquare class="wrapper" />
  <ProgressDots class="wrapper" />
  <JumpingHeart class="wrapper" />
@@ -29,12 +34,16 @@ import Pacman from "./components/Pacman.vue";
  <RotateCircle class="wrapper" />
  <Wave class="wrapper" />
  <TwinCircle class="wrapper" />
+ <DoubleBouncyCircles class="wrapper" />
+ <BouncyCircles class="wrapper" />
+ <DottedSquare class="wrapper" />
+ <ForwardingArrow class="wrapper" />
+ <RotatingSquares class="wrapper" />
  </div>
 </template>
 
-
 <style scoped lang="postcss">
 .wrapper {
  @apply relative flex gap-4 h-64 w-64 bg-pink-100 items-center justify-center m-4;
 }
-</style>
+</style>

src/assets/images/arrow-forward.gif

@@ -0,0 +1,17 @@
+<template>
+ <div class="mx-auto">
+ <div class="-mt-10 mr-20 relative h-10 w-10">
+ <div
+ class="relative mx-auto ms-5 h-32 w-32 animate-bounce rounded-full border-2 border-pink-300"
+ >
+ <div class="absolute bottom-0 right-14">
+ <div class="relative h-40 animate-bounce">
+ <div
+ class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-pink-800"
+ ></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>

src/assets/images/bouncy-circles.gif

@@ -0,0 +1,7 @@
+<template>
+ <div class="mx-auto">
+ <div
+ class="h-28 w-28 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-pink-600"
+ ></div>
+ </div>
+</template>

src/assets/images/dotted-square.gif

@@ -0,0 +1,12 @@
+<template>
+ <div class="mx-auto">
+ <div class="-mt-10 mr-5 relative h-12 w-12 animate-bounce">
+ <div
+ class="mx-auto h-20 w-20 animate-pulse rounded-full bg-pink-700"
+ ></div>
+ <span class="absolute flex h-7 w-7 animate-spin">
+ <span class="h-5 w-5 rounded-full bg-pink-400"> </span>
+ </span>
+ </div>
+ </div>
+</template>