diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/css/style.css b/ideamatrics-robotic-arm-animation/about-us-slider/css/style.css
new file mode 100644
index 0000000..e5bf548
--- /dev/null
+++ b/ideamatrics-robotic-arm-animation/about-us-slider/css/style.css
@@ -0,0 +1,48 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+body {
+ overflow-x: hidden;
+}
+.main {
+ width: 100%;
+ height: 100vh;
+ background-color: rgb(90, 82, 82);
+}
+.cw1,
+.cw2 {
+ height: 100vh;
+ width: 100%;
+}
+.cw1 {
+ background-color: blueviolet;
+}
+.cw2 {
+ background-color: rgb(57, 132, 27);
+}
+
+.main-container {
+ width: 100%;
+ height: 100vh;
+ background-color: chartreuse;
+}
+
+.container-wrap {
+ width: 300vw;
+ height: 100%;
+ display: flex;
+ gap: 10rem;
+ align-items: center;
+}
+
+.container {
+ width: 8%;
+ height: 45vh;
+ margin-left: 5%;
+ background-color: blueviolet;
+}
+#c2 {
+ margin-top: -5%;
+}
diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/index.html b/ideamatrics-robotic-arm-animation/about-us-slider/index.html
new file mode 100644
index 0000000..f2e20e8
--- /dev/null
+++ b/ideamatrics-robotic-arm-animation/about-us-slider/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
diff --git a/ideamatrics-robotic-arm-animation/about-us-slider/js/script.js b/ideamatrics-robotic-arm-animation/about-us-slider/js/script.js
new file mode 100644
index 0000000..51de21a
--- /dev/null
+++ b/ideamatrics-robotic-arm-animation/about-us-slider/js/script.js
@@ -0,0 +1,12 @@
+gsap.to(".container-wrap", {
+ transform: "translateX(-200vw)",
+ scrollTrigger: {
+ trigger: ".container-wrap",
+ scroller: "body",
+ markers: true,
+ pin: true,
+ start: "top 100vh",
+ end: "top -100vh",
+ scrub: 4,
+ },
+});