diff --git a/Load Animations/Text async animation/index.html b/Load Animations/Text async animation/index.html
new file mode 100644
index 0000000..e3915b6
--- /dev/null
+++ b/Load Animations/Text async animation/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Text async animation
+
+
+
+
+
+ Loading!
+
+
+
\ No newline at end of file
diff --git a/Load Animations/Text async animation/script.js b/Load Animations/Text async animation/script.js
new file mode 100644
index 0000000..823d0af
--- /dev/null
+++ b/Load Animations/Text async animation/script.js
@@ -0,0 +1,46 @@
+function swoop(text, infinite) {
+ let TextToAnimate = document.getElementById(text)
+ let TTAString = TextToAnimate.innerHTML
+ TextToAnimate.innerHTML = ''
+
+ for (var x = 0; x < TTAString.length; x++) {
+ if (TTAString[x] === ' ') {
+ TextToAnimate.innerHTML += '' + ' ' + ''
+ } else {
+ TextToAnimate.innerHTML += '' + TTAString[x] + ''
+ }
+ }
+ function sleep(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms))
+ }
+ async function elanimate(text) {
+ text = text.getElementsByTagName('span')
+ for (i = 0; i < text.length; i++) {
+ text[i].classList.add('animate')
+ await sleep(100)
+ }
+ await sleep(300)
+ for (i = 0; i < text.length; i++) {
+ text[i].classList.add('animate2')
+ await sleep(100)
+ }
+ await sleep(300)
+ for (i = 0; i < text.length; i++) {
+ text[i].classList.add('animate3')
+ await sleep(100)
+ }
+ if (infinite === true) {
+ await sleep(1000)
+ for (i = 0; i < text.length; i++) {
+ text[i].classList.remove('animate')
+ text[i].classList.remove('animate2')
+ text[i].classList.remove('animate3')
+ }
+ } else {
+ return
+ }
+ elanimate(TextToAnimate, infinite)
+ }
+ elanimate(TextToAnimate, infinite)
+}
+swoop('animatethis', true) // id of text to animate, true = infinite
diff --git a/Load Animations/Text async animation/style.css b/Load Animations/Text async animation/style.css
new file mode 100644
index 0000000..bc80707
--- /dev/null
+++ b/Load Animations/Text async animation/style.css
@@ -0,0 +1,61 @@
+@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
+body {
+ background: #0a043c;
+ color: #ffe3d8;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin:0;
+ padding:0;
+}
+h1 {
+ font-variant: Small-caps;
+ font-size: 6em;
+ letter-spacing:0.2em;
+}
+
+span {
+ opacity: 0;
+ display: inline-block;
+ transform: scale(0.8);
+}
+span.animate {
+ animation: pog 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
+}
+span.animate2 {
+ animation: pog2 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
+}
+span.animate3 {
+ animation: pog3 460ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
+}
+@keyframes pog {
+ from {
+ opacity: 0;
+ transform: scale(0.8) rotate(15deg);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+@keyframes pog2 {
+ from {
+ opacity: 1;
+ transform: translateX(0px);
+ }
+ to {
+ opacity: 0;
+ transform: scale(0.8) translateX(-10px) rotate(10deg);
+ }
+}
+@keyframes pog3 {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+}