nuxt3 and gsap

[davidschubert]

Did you ever tried to implement GSAP Smoothscroller instead of Locomotive Scroll?

And second question. Do you have a tutorial how to implement GSAP into nuxt 3?

Great website by the way 👍🏼

[logotip4ik]

Hello!

And thank you for great questions 😄

When I began working on this website, there wasn't such a thing as SmoothScroller yet. But currently I think I should have a look at such a cool tool and test it in some little pens

Secondly, I haven't written any blog posts or tutorials yet. But briefly. I was facing 2 main issues with gsap and nuxt3. First one was not being able to import plugins as in normal client only websites. Second one was, how to register gsap plugins as soon as possible and call register function only once.

For the first one, it took me a while to find a solution to this problem, but it was quite a simple one. You just need to transpile the gsap itself 😅. Nuxt3 has compatible with Nuxt3 configuration, so to fix this, add something like this to your Nuxt3 configuration:

// nuxt.config.js or .ts

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  // ... some configuration

  build: { transpile: ['gsap'] }

 // ... even more configuration
})

As for the second one, pretty straightforward solution is to use nuxt plugins.

// plugins/gsap.js - we are already transpiling gsap, so it can be imported in server builds, pretty neat :)

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

// nuxt will auto import defineNuxtPlugin, so our file will look clean
export default defineNuxtPlugin(() => {
  // imported gsap and all plugins needed, then just register them and provide
  gsap.registerPlugin(ScrollToPlugin, ScrollTrigger)

  // later you can use them by deconstructing useNuxtApp composable
  // but everything you put in provide will be prefixed with `$` symbol to 
  // prevent some collisions
  return { provide: { gsap, ScrollToPlugin, ScrollTrigger } }
})

This is probably everything you need to import gsap and this shouldn't cause any errors. But to make your code look more elegant and clean, you can write gsap composable, which will remove all not needed prefixed symbols.

// composables/use-gsap.js

export default () => {
  // auto imported by nuxt
  const nuxtApp = useNuxtApp();

  return {
    // this coming from gsap plugin, which will be also auto registered
    gsap: nuxtApp.$gsap,
    ScrollTrigger: nuxtApp.$ScrollTrigger,
    ScrollToPlugin: nuxtApp.$ScrollToPlugin,
  };
};

And then in every page or component you can do:

<script setup>
// name of composable is the file name, just remove `-` and camelCase it
const { gsap, ScrollTrigger, ScrollToPlugin } = useGsap()

// or, if you omitted creation of your own composable you still can use gsap and everything else through useNuxtApp
const { $gsap, $ScrollTrigger, $ScrollToPlugin } = useNuxtApp()

const box = ref(null)

onMounted(() => {
  gsap.from(box.value, { y: -100, opacity: 0, ease: 'expo.out', duration: 1 })
})
</script>

<template>
  <div class="container">
    <div ref="box" class="container__box">i am a box</div>
  </div>
</template>

Hope it helps and feel free to ask if something is unclear )

P.S. Sorry for my English if something isn't correct
P.P.S. I am really pleased that my work is somewhat inspiring and/or helpful to someone else 🥰