DEV Community

Cover image for Parallax image scroll speed with Nuxt 3 and GSAP πŸ›£οΈβœ¨
Bruna Fusiger
Bruna Fusiger

Posted on

1

Parallax image scroll speed with Nuxt 3 and GSAP πŸ›£οΈβœ¨

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
πŸ”πŸ“š


2- Install the module



bun add -D @hypernym/nuxt-gsap


Enter fullscreen mode Exit fullscreen mode

Use your preferred package manager. I'm using bun


3- Add the module in your nuxt.config.ts



// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-gsap']
}



Enter fullscreen mode Exit fullscreen mode

4- Add this configs to your Nuxt GSAP Module



// nuxt.config.ts
gsap: {
    composables: true,
    provide: false,
  },


Enter fullscreen mode Exit fullscreen mode

5- In your app.vue register the ScrollTrigger



<script setup lang="ts">
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

onMounted(() => {
  gsap.registerPlugin(ScrollTrigger)
})

</script>


Enter fullscreen mode Exit fullscreen mode


6- In the file where you want to create a parallax image effect, import your GSAP and scrollTrigger in the script configuration



<script setup lang="ts">
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
</script>


Enter fullscreen mode Exit fullscreen mode

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:



<script setup lang="ts">
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

onMounted(() => {
  gsap.to('[data-speed]', {
    y: (i, el) => (1 - Number.parseFloat(el.getAttribute('data-speed'))) * ScrollTrigger.maxScroll(window),
    ease: 'none',
    scrollTrigger: {
      start: 0,
      end: 'max',
      invalidateOnRefresh: true,
      scrub: 0,
    },
  })
})
</script>


Enter fullscreen mode Exit fullscreen mode

Template



<template>
<section>
 <NuxtImg
   data-speed="0.9"
   class="absolute top-50 w-15 -right-6"
   src="my-path.webp"
  />

  <NuxtImg
   data-speed="0.8"
   class="absolute top-50 w-15 -right-6"
   src="my-path.webp"
  />
</section>
</template>


Enter fullscreen mode Exit fullscreen mode

PS.: Check out my reference πŸ”

Hope this helps! :)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay