> I was having some trouble finding _how to create a parallax based on scroll speed in two images on my nuxt 3 website_. After some research and trial and error I **succeeded**🥳. Maybe this will be useful to you 🎉 Steps I followed: --- ## **1- Read this Nuxt GSAP module** [![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdhw1s8gvn5qindzoeeo.png)](https://github.com/hypernym-studio/nuxt-gsap) [🔍📚](https://github.com/hypernym-studio/nuxt-gsap) --- ## **2- Install the module** ``` bun add -D @hypernym/nuxt-gsap ``` Use your preferred package manager. I'm using **[bun](https://bun.sh/)** --- ## **3- Add the module in your nuxt.config.ts** ``` // nuxt.config.ts { modules: ['@hypernym/nuxt-gsap'] } ``` --- ## **4- Add this configs to your Nuxt GSAP Module** ``` // nuxt.config.ts gsap: { composables: true, provide: false, }, ``` --- ## **5- In your app.vue register the ScrollTrigger** ``` ``` --- --- ## **6- In the file where you want to create a parallax image effect, import your GSAP and scrollTrigger in the script configuration** ``` ``` --- ## **7- Now Let's create the speed scroll parallax image effect** **Contextualizing**: The function animates elements with a data-speed attribute, making them move vertically as the user scrolls the page. - _**Higher data-speed = less movement**_, creating a parallax effect where different elements move at different speeds relative to the scroll position. --- **Script:** ``` ``` **Template** ``` ``` --- PS.: [Check out my reference 🔍](https://codepen.io/GreenSock/pen/RwVGNea) Hope this helps! :)

brunafusiger

Parallax image scroll speed with Nuxt 3 and GSAP 🛣️✨

Join Our Newsletter. No Spam, Only the good stuff.