diff --git a/scroll-background-circle.html b/scroll-background-circle.html
new file mode 100644
index 0000000..f8fbf1b
--- /dev/null
+++ b/scroll-background-circle.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Observer.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
+    <style>
+        :root {
+            --circleSize: 0vh;
+            --circleColor: white;
+        }
+
+        body {
+            padding-top: 400px;
+            padding-bottom: 600px;
+        }
+
+        .section {
+            height: 100vh;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &.first {
+                background-color: white;
+            }
+            &.second {
+                background-color: black;
+            }
+
+
+
+            .text-wrap {
+                p {
+                    font-weight: 600;
+                    font-size: 3em;
+                    text-align: center;
+                    margin: 0;
+                    color: white;
+                    mix-blend-mode: difference;
+                }
+            }
+
+            .circle {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                background-color: white;
+                mix-blend-mode: difference;
+                border-radius: 100%;
+                transform: translate(-50%, -50%);
+                width: var(--circleSize);
+                height: var(--circleSize);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="section first">
+        <div class="circle"></div>
+        <div class="text-wrap">
+            <p>
+                brands & <br />
+                Experiences
+            </p>
+
+        </div>
+    </div>
+    <div class="section second">
+        <div class="circle"></div>
+        <div class="text-wrap">
+            <p>
+                second & <br />
+                Experiences
+            </p>
+
+        </div>
+    </div>
+    <script>
+        document.addEventListener("DOMContentLoaded", (event) => {
+            gsap.registerPlugin(ScrollTrigger);
+            
+            gsap.to(".section.first .circle", {
+                width: '100vh',
+                height: '100vh',
+                scrollTrigger: {
+                    trigger: ".section.first",
+                    start: "top +=100",
+                    endTrigger: ".section.second",
+                    end: "top",
+                    scrub: true,
+                    markers: true
+                }
+            });
+
+            gsap.to(".section.second .circle", {
+                width: '100vh',
+                height: '100vh',
+                scrollTrigger: {
+                    trigger: ".section.second",
+                    start: "top",
+                    end: "bottom",
+                    scrub: true,
+                    markers: true
+                }
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/textAnimation00.html b/textAnimation00.html
new file mode 100644
index 0000000..b08b8ff
--- /dev/null
+++ b/textAnimation00.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Observer.min.js"></script>
+    <style>
+        :root {
+            @font-face {
+                font-family: 'Paperlogy-8ExtraBold';
+                src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
+                font-weight: 800;
+                font-style: normal;
+            }
+        }
+
+        p {
+            font-family: 'Paperlogy-8ExtraBold';
+        }
+
+        body {
+            padding-bottom: 5000px;
+
+
+        }
+
+        .box-mother {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            .box {
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                position: fixed;
+                width: 100%;
+
+                p {
+                    margin: 0;
+                    font-size: 3em;
+                    text-align: center;
+                }
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box-mother">
+        <div class="box">
+            <p>Making</p>
+            <p>The <b>bold</b></p>
+            <p>beautiful</p>
+        </div>
+    </div>
+    <script>
+
+        document.addEventListener("DOMContentLoaded", (event) => {
+            Observer.create({
+                target: document,
+                type: "wheel, scroll",
+                onDown: (e) => {
+                    if (e.scrollY.v > 100) {
+                        gsap.to("p:nth-child(1), p:nth-child(3)", {
+                            x: 200,
+                        });
+                        gsap.to("p:nth-child(2)", {
+                            x: -200,
+                        })
+                    }
+                    if (e.scrollY.v > 150) {
+                        gsap.to("p:nth-child(1), p:nth-child(3)", {
+                            opacity: 0,
+                        });
+                        gsap.to("p:nth-child(2)", {
+                            opacity: 0,
+                        })
+                    }
+                },
+                onUp: (e) => {
+                    if (e.scrollY.v < 100) {
+                        gsap.to("p:nth-child(1), p:nth-child(3)", {
+                            x: 0,
+                        });
+                        gsap.to("p:nth-child(2)", {
+                            x: 0,
+                        })
+                    }
+                    if (e.scrollY.v < 150) {
+                        gsap.to("p:nth-child(1), p:nth-child(3)", {
+                            opacity: 1,
+                        });
+                        gsap.to("p:nth-child(2)", {
+                            opacity: 1,
+                        })
+                    }
+                }
+            });
+        });
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
