Horizontal scroll for Vue Js

[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>

[Rodrigo]

Hi @manvanoss and welcome to the GSAP Forums!

 

There is not a lot we can do  without a minimal demo. That being said, setting up something in Vue is quite simple. We have a set of Vue starter templates in stackblitz:

https://stackblitz.com/@gsap-dev/collections/gsap-vue3-starters

 

Here is a super simple demo using Vue:

https://stackblitz.com/edit/vitejs-vite-onqhee?file=src%2FApp.vue&terminal=dev

 

Hopefully this helps.

Happy Tweening!