manvanoss

Hi, im creating a horizontal scroll for my vue js and it seems aint working. Is there something wrong with my code? <template> <div class="h-5/6 mx-10 " ref="wrapper"> <div class="flex overflow-x-hidden"> <section class="flex-shrink-0 w-screen bg-opacity-25 bg-white bg-blur rounded-md my-10" ref="panel"> <div class=" md:w-2/4 lg:w-1/2 p-4"> <div class=" p-8 my-32 rounded-lg bg-opacity-25 bg-blur"> <!-- Card content goes here --> <h2 class="text-4xl font-semibold mb-4">About Me</h2> <p class="text-gray-700 text-xl">Hey there! I'm Beni, a freelance web developer with a passion for crafting unique digital experiences. With 2 years of experience under my belt, I specialize in creating custom websites and web applications that not only look great but also drive results.</p> <br/> <p class="text-gray-700 text-xl">My approach is simple: I work closely with my clients to understand their goals and objectives, and then leverage my technical skills and creative vision to bring their ideas to life. Whether you're a startup looking to establish your online presence or an established business in need of a website refresh, I'm here to help you succeed in the digital world.</p> <br/> <p class="text-gray-700 text-xl">From responsive designs and intuitive user interfaces to seamless functionality and smooth user experiences, I pride myself on delivering high-quality work that exceeds expectations. Let's collaborate to turn your vision into reality and take your online presence to the next level.</p> </div> </div> </section> <section class=" flex-shrink-0 w-screen bg-opacity-25 bg-white bg-blur rounded-md my-10" ref="panel"> <div class=" md:w-1/2 lg:w-1/2 p-4"> <div class=" p-8 my-32 rounded-lg bg-opacity-25 bg-blur"> <!-- Card content goes here --> <h2 class="text-4xl font-semibold mb-4">About Me</h2> <p class="text-gray-700 text-xl">Hey there! I'm Beni, a freelance web developer with a passion for crafting unique digital experiences. With 2 years of experience under my belt, I specialize in creating custom websites and web applications that not only look great but also drive results.</p> <br/> <p class="text-gray-700 text-xl">My approach is simple: I work closely with my clients to understand their goals and objectives, and then leverage my technical skills and creative vision to bring their ideas to life. Whether you're a startup looking to establish your online presence or an established business in need of a website refresh, I'm here to help you succeed in the digital world.</p> <br/> <p class="text-gray-700 text-xl">From responsive designs and intuitive user interfaces to seamless functionality and smooth user experiences, I pride myself on delivering high-quality work that exceeds expectations. Let's collaborate to turn your vision into reality and take your online presence to the next level.</p> </div> </div> </section> <section class=" flex-shrink-0 w-screen bg-opacity-25 bg-white bg-blur rounded-md my-10" ref="panel"> <div class="w-full md:w-1/2 lg:w-1/2 p-4"> <div class=" p-8 my-32 rounded-lg bg-opacity-25 bg-blur"> <!-- Card content goes here --> <h2 class="text-4xl font-semibold mb-4">About Me</h2> <p class="text-gray-700 text-xl">Hey there! I'm Beni, a freelance web developer with a passion for crafting unique digital experiences. With 2 years of experience under my belt, I specialize in creating custom websites and web applications that not only look great but also drive results.</p> <br/> <p class="text-gray-700 text-xl">My approach is simple: I work closely with my clients to understand their goals and objectives, and then leverage my technical skills and creative vision to bring their ideas to life. Whether you're a startup looking to establish your online presence or an established business in need of a website refresh, I'm here to help you succeed in the digital world.</p> <br/> <p class="text-gray-700 text-xl">From responsive designs and intuitive user interfaces to seamless functionality and smooth user experiences, I pride myself on delivering high-quality work that exceeds expectations. Let's collaborate to turn your vision into reality and take your online presence to the next level.</p> </div> </div> </section> </div> </div> </template> <script> import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default { name: "HorizontalScrollComponent", mounted() { // Select the container and sections let sections = gsap.utils.toArray(".panel"); // Apply the horizontal scroll animation to the container gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".horizontal-sliders", pin: ".main", pinSpacing: true, scrub: 1, end: "+=3000", } }); } }; </script> <style> .container{ width: 100px; } </style>