Hi,

Thanks for the awesome module!

Is it possible to use it with Composition API? is there any code sample of how to import and use it?

Many thanks!

Currently trying to do one of your examples with compositon api, but I can't figure out a way to make it work.

I'm keep getting the error
$gsap is not defined

<script setup>
import { onMounted } from '@nuxtjs/composition-api';
  
onMounted(() => {
  setRotationOnLoad();
})

const setRotationOnClick = () => {
  $gsap.to('.title2', { rotation: 90, x: 100, duration: 2 })
}

const setRotationOnLoad = () => {
  $gsap.to('.title1', { rotation: 27, x: 100, duration: 1 })
}

</script>

Hi, I have been reading a lot of questions in the GSAP Forum about Nuxt page navigation affecting scrollTrigger. They solve it destroying all the tweens with .kill() on the beforeDestroy() hook, which I didn't find any information about on the Nuxt docs nor here and after trying it on my project it gives me page error when navigating to another page.
They talk about it here.

export default {
  mounted() {
    this.animateOnScroll()
  },

  methods: {
    animateOnScroll() {
      const gsap = this.$gsap.timeline({
        scrollTrigger: {
          trigger: '.content',
          pin: true,
          end: 'bottom',
          scrub: true
        },
      });
      gsap.from(".box", {
        x: 300,
        opacity: 0,
        stagger: 0.1,
        ease: 'Power1.easeInOut',
      });
    },
  },

  beforeDestroy() {
    this.animateOnScroll.scrollTrigger.kill();
    this.animateOnScroll.kill();
    // or target every scrolltrigger
    scrollTrigger.getAll().forEach((t) => t.kill());
  },
}

The beforeDestroy functions none of them work for me, I'm probably doing something wrong.
And in the Animate on scroll examples it is not included, but is it needed to do so? If so, how can I do it (and maybe include it in the docs).

Also, sometimes after navigating, the scrollTrigger trigger may be some pixels above the element itself and here they talk about using ScrollTrigger.refresh() but don't know where to put it neither.
P.S: The inject("ScrollTrigger", ScrollTrigger); they talk about is not needed now that it exist this module, right?

So, do we have to create and kill the scrollTrigger every time, refresh it...? It's so confusing hahaha.
I know these questions may be a bit perplex, but I can't find the right solution. Thanks :)

Hi. Please could you advise how we might be able to use this with our GSAP Business account to use the bonus plugins, such as MorphSVG?
many thanks,

Hey,

Seems like a great module for nuxt!
Is it possible to do a Stagger animation and how would you impliment it?

Thanks

Steps to Reproduce

1. Run npx nuxi@latest init <my-app>
2. npm i -D @hypernym/nuxt-gsap
3. Configure gsap extraPlugins in nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { 
    enabled: true 
  },
  modules: [
    "nuxt-directus",
    "@hypernym/nuxt-gsap"
  ],
  gsap: {
    extraPlugins: {
      flip: true,
      scrollTrigger: true,
      observer: true,
      scrollTo: true
    }
  }
})

Current Behavior

This throws an error in the nuxt.config.ts:

Argument of type '{ devtools: { enabled: boolean; }; modules: string[]; gsap: { extraPlugins: { flip: boolean; scrollTrigger: boolean; observer: boolean; scrollTo: boolean; }; }; }' is not assignable to parameter of type 'InputConfig<NuxtConfig, ConfigLayerMeta>'.
  Object literal may only specify known properties, and 'gsap' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>

Expected Behavior

No error

Additional Details

Version

{
  [...]
  "devDependencies": {
    "@hypernym/nuxt-gsap": "^2.2.2",
    "@nuxt/devtools": "latest",
    "@types/node": "^18.16.19",
    "nuxt": "^3.6.2"
  },
  "dependencies": {
    "gsap": "^3.12.2",
    "nuxt-directus": "^5.4.4"
  }
}

The complete error is as follows:

TS2339: Property '$scrollbar' does not exist on type 'CombinedVueInstance<Vue, { pageName: string; }, { parallax(): void; fetchPageName(): string; }, unknown, Readonly<Record<never, any>>>'.

So the nuxt-gsap-module works fine as long as I use the directives. But I'm using smooth-vuebar and for the two packages to work with each other I need to use this.$Scrolltrigger.scrollerProxy(). But I can't use it since it errors as stated above. I have no clue on how to properly configure my scrollTrigger.

Hi,

Thank you for your work on this module.

I had a question regarding how to access the $gsap vue prototype from a js plugin
I am trying to register gsap effects using https://greensock.com/docs/v3/GSAP/gsap.registerEffect(). I have succesfully register effects from a component using this.$gsap.registerEffect().. but wanted to clean up and organize my code a little bit better, and since gsap effects only need to be registered once to be used globally I thought about using a plugin for this, but whenever I use this.$gsap inside a plugin it is undefined. I don't have a lot of experience with nuxt plugins or independente js files so any tip or advice would be greatly appreciated.

Thank you in advance.

Hello, first of all great module!

I try to get the club feature SplitText working, but it's not

1. i added a .npmrc within the root of my nuxt project
2. i added npm:@gsap/shockingly to my package.json
3. i added:

gsap: {
 clubPlugins: {
      splitText: true,
    }
}

to my nuxt.config.json and nuxt-gsap-module to my buildModules

When i use

 console.log(this.$SplitText);

i see

but when i try to use it like:

const line = this.$SplitText(this.$refs.typewriter, {
      type: "lines,words,chars",
      linesClass: "split-line",
    });

i've got

TypeError: this.split is not a function
    SplitText SplitText.js:537
    created Faq.vue:40

Any help appreciated

It work in chrome well.However, an error occurred in ie11.

minimal reproduction

//nuxt.config.js
export default{
 buildModules: ['nuxt-gsap-module'],
 gsap: {
    extraPlugins: {
      scrollTrigger: true
    }
  },
  build:{
      transpile: ['gsap']
  }
}

// pages/index.vue
<template>
  <div class="test">
    <div class="box" />
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Test',
  mounted() {
    this.$gsap.timeline({
      scrollTrigger: {
        trigger: '.test',
        start: 'top top',
        end: 'bottom bottom',
        markers: true,
        scrub: 1
      }
    }).to('.box', { y: 1000 })
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.test {
  height: 200vh;
}

.box {
  width: 500px;
  height: 500px;
  background: #ff0000;
}
</style>

Steps to Reproduce

heroScale() { this.$gsap.to('.home__hero__wrapper', { scale: 0.8, opacity: 0.75, duration: 1.2, scrollTrigger: { trigger: '.home__projects', markers: true, start: 'top 100%', end: 'top 50%', scrub: true } }) }

Current Behavior

The issues is that it works only after I save a change in the code. After refreshing the page, it stops working.

Something else, is the fact that, global effects are not working. Maybe the issues are linked in some way.

Expected Behavior

I am trying to set a scrollTrigger animation that sets the opacity and scale to a smaller value than normal on scroll.
Am I doing something wrong?

Thank you for your help!

Additional Details

No response

Version

No response

Discussed in #46

<div id="js-trigger">
<h2 class="itemA">Test</h2>
<p class="itemB">Test</p>
</div>

<script setup lang="ts">
const { $gsap, $ScrollTrigger } = useNuxtApp();

function firstTween() {
$gsap.to(".itemA", {
  scrollTrigger: {
    id: "firstTween",
    trigger: "#js-trigger",
    start: "center 25%",
    end: "center 75%",
    scrub: 1,
    markers: true,
  },
  x: 300,
  opacity: 0,
  stagger: 0.1,
});
}

function secondTween() {
$gsap.fromTo(
  ".itemB",
  {
    x: 300,
    opacity: 0,
    stagger: 0.1,
  },
  {
    scrollTrigger: {
      id: "secondTween",
      trigger: "#js-trigger",
      start: "center 15%",
      end: "center 95%",
      scrub: 1,
      markers: true,
    },
    x: 0,
    opacity: 1,
    stagger: 0.1,
  }
);
}

onMounted(() => {
firstTween();
secondTween();
});

onBeforeUnmount(() => {
// Returns the ScrollTrigger with unique Id
// and kills it before route change
$ScrollTrigger.getById('firstTween').kill()
$ScrollTrigger.getById('secondTween').kill()
});
</script>

Is it compatible with Nuxtjs 3?

Hello, I am having issues understanding exactly how to access additional GSAP Plugins using the 'nuxt-gsap-module'. I've been reviewing the README.md for solutions but I have yet to figure this out.

I installed the module with:

npm install --save-dev nuxt-gsap-module

I placed the module within a string inside of the buildModules array:

// nuxt.config.js

  buildModules: [
    'nuxt-gsap-module',
  ],

I've extended GSAP plugins within the gsap object as such:

// nuxt.config.js

  gsap: {
    extraPlugins: {
      scrollTo: true,
      scrollTrigger: true,
    },
    extraEases: {
      expoScaleEase: true,
    },
  },

I've successfully implemented the global gsap variable ( this.$gsap ) like so:

<script>
export default {
  mounted() {
    this.horizontalSnap()
  },
  methods: {
    horizontalSnap() {
      const gsap = this.$gsap
      const sections = gsap.utils.toArray('.panel')

      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: 'none',
        scrollTrigger: {
          trigger: '.container',
          pin: true,
          scrub: 1,
          snap: 1 / (sections.length - 1),
          // base vertical scrolling on how wide the container is so it feels more natural.
          end: '+=3500',
        },
      })
    },
  },
}
</script>

But when I tried to utilize said plugins ( ScrollTrigger ) via global namespaced this.$PluginName like so:

<script>
export default {
  mounted() {
    // This is throwing an error, " cannot read properties 'create' of undefined "

    this.$ScrollTrigger.create({
      start: 0,
      onUpdate(self) {
        const scroll = self.scroll()
        if (scroll > self.end - 1) {
          wrap(1, 1)
        } else if (scroll < 1 && self.direction < 0) {
          wrap(-1, self.end - 1)
        } else {
          scrub.vars.offset =
            (iteration + self.progress) * seamlessLoop.duration()
          scrub.invalidate().restart() 
        }
      },
      end: '+=3000',
      pin: '.gallery',
    })

The plugin is not being recognized utilizing this.

I was hoping I could figure out what I am doing wrong so that I can begin implementing and learning GSAP.

Thanks!

There's a problem with matchMedia()

Error

this.$ScrollTrigger.matchMedia({
      "(min-width: 768px)": function() {
        this.$gsap.to("myId", {

Correct

const sTrig = this.$ScrollTrigger;
const gs = this.$gsap;

    sTrig.matchMedia({
      "(min-width: 768px)": function() {
        gs.to(apropositoTitle, {

Summary

Getting this error when registering drawSVG into nuxt

Steps done:

• nuxt.config.js:

gsap: {
    extraPlugins: {},
    clubPlugins: {
      drawSVG: true,
    },
    registerEffect: []
  },

• using in template with directive:

<circle v-gsap.from="{
      duration: 1,
      drawSVG: '0 100%'
  }" cx="121.89451" cy="325.76588" r="45" fill="#6c63ff"/>

I have checked how it is actually registered in the module/templates/plugin:

<% if (options.clubPlugins.drawSVG) { %>
    const { DrawSVGPlugin } = require('gsap/DrawSVGPlugin')
    inject('DrawSVGPlugin', DrawSVGPlugin)
    gsap.registerPlugin(DrawSVGPlugin)
<% } %>

I can't take vague assumptions at this point, but I am thinking that it might have some buggy behaviors 🤔

Hi
3.10 is coming to everyone's favorite GreenSock.
I am a lover of Nuxt-gsap-module, when exactly will this module be ready for 3.10? I am looking forward to it as much as Santa is coming.

There are lots of frameworks to do the docs part, just let me know if you have something in mind (e.g. nuxt content / docusaurus / vuepress / .... etc

Hi. I just installed your plugin and got this error (missed or typo) in your codes ! :)

this is my nuxt.config.js

gsap: {
    extraPlugins: {
      cssRule: false,
      draggable: false,
      easel: false,
      motionPath: false,
      pixi: false,
      text: false,
      scrollTo: false,
      scrollTrigger: false
    },
    extraEases: {
      expoScaleEase: false,
      roughEase: false,
      slowMo: false,
    }
  },

Hey guys.

Is there any way to apply the fromTo initial from values before rendering the page? Instead of having to make the CSS show opacity: 0, by default, would be great to apply these effects initially without having to use css for initial render.

For example:

This what I'm doing:

this.$gsap.fromTo('[data-content]', {
  y: -50,
  opacity: 0
}, {
  y: 0,
  opacity: 0
})

However on initial load of the page, the elements show up first, then the animation fromTo applies, causing a very weird experience. A workaround to this is setting the default css to the element to have opacity: 0, translateY(-50) but it's not ideal. Is there any way to apply this functionality without setting the css to intially display like that?

I'm trying to add "animate"-method to my component in order to separate concerns. The animation is very slow if I use the template method (in development, no idea how it is in production), which works from a component However, the gsap object isn't available in "this" in components, nor in process, so I need to use the gsap-object when in a page, which gets cumbersome when adding several components with different animaitons.

This might be due to my inexperience with Nuxt, I just saw that I was almost reproducing routers, states, etc. in this project and decided to move it into Nuxt.

It might be related to when things are instantiated in Nuxt, I don't know :)

Hi, I wonder if it's possible to add scrollTrigger inside the v-gsap and how. I have tried without any success and can't find it on the docs.

gsap.from(".box", {
  opacity: 0,
  scrollTrigger: {
    start: "center center",
    end: "center center",
    trigger: ".trigger,
    markers: true,
  },
});

Use in templates

<div v-gsap.to="{ /* ... */ }"></div>

<div v-gsap.from="{ /* ... */ }"></div>

<div v-gsap.fromTo="[{ /* ... */ }, { /* ... */ }]"></div>

<div v-gsap.set="{ /* ... */ }"></div>

I'm trying to deploy a Nuxt app to the Digital Ocean App Platform, and whenever i run the build, it gives me this error:

ERROR in ./.nuxt/gsapModule.js
Module not found: Error: Can't resolve 'gsap' in '/workspace/.nuxt'
@ ./.nuxt/gsapModule.js 14:0-28 21:4-8 25:4-8 29:4-8 33:4-8 36:22-26 43:2-6
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

I think I have things set up correctly, here is my nuxt.config.js file:

buildModules: [
    'nuxt-gsap-module',
 ],

...

gsap: {
    extraPlugins: {
      draggable: true
    },
  },

Any idea on why this might be happening?

I'm having an issue with scrolltriggers.
Is not working on my end.

`

export default{
mounted(){
console.log(this.$ScrollTrigger)
}
}

and my nuxt.config.js looks like
` buildModules: [
"@nuxtjs/device",
"nuxt-gsap-module",
],

gsap: {
    extraPluggins: {
        scrollTo: true,
        scrollTrigger: true,
    },
},`

Strange thing is that I in order projects without problems.
Using nuxt 2.15.7

Hi, thanks for developing this Nuxtjs library to integrate with GSAP easily.
But I have an issue when I tried to use the extra plugin such as scrollTrigger,
It was working perfectly on the dev environment, after I start to build and run on the production, the plugin was not discovered. See the screenshot below for the warning message.

Any ideas what should I do to fix this? Because most of the animations are using scrollTrigger.

Thanks.

Hello,

I'm trying to use the ScrollSmoother club plugin in my app but when I log this.$scrollSmoother I get undefined even tho my SplitText plugin works perfectly fine. Could this be an issue with the module because my other club plugin works but ScrollSmoother does not.

GSAP 3.11 with tons of cool features. See Release Notes

Is it possible to register a plugin globally in the ~/plugins folder? for example ScrollTrigger:

const gsap = this.$gsap
const ScrollTrigger = this.$ScrollTrigger

gsap.registerPlugin(ScrollTrigger)

Hey buddy,

As always thank you for your hard work on all this. How do I get locomotive and ScrollTrigger to work nicely together?

I've tried a couple of attempts but I am failing. Just wondered if you've managed to make those two things work together nicely?

Steps to Reproduce

Hey

Followed the install instructions. Everything works, but there are no types. Anything I'm missing?

Current Behavior

No types

Expected Behavior

Should have types

Additional Details

No response

Version

No response

Steps to Reproduce

Nuxt: 2.15.7
nuxt-gsap-module: 1.7.3
gsap: 3.11.4
Node: 16.13.0

In my nuxt project, I have 'nuxt-gsap-module' installed, and configured in the nuxt.config.js file like so:

  buildModules: [
    'nuxt-gsap-module'
  ],

  gsap: {
    extraPlugins: {
      draggable: true,
      scrollTo: true,
    },
    clubPlugins: {
      inertia: true,
      splitText: true,
      flip: true,
    }
  },

  build: {
    transpile: ['gsap']
  }

I also have gsap installed using the gsap-bonus.tgz file so that I can use the extra plugins.

Current Behavior

With this setup, I keep getting the following error in regards to the 'Flip' plugin:

Uncaught TypeError: Cannot read properties of undefined (reading 'fit')

When I console log `this.$Flip', I get undefined. This was working for me a few weeks ago, not sure why it wont work now.

Expected Behavior

The Flip plugin should not be undefined.

Additional Details

No response

Version

1.7.3

Hello, how do I instantiate objects for plugins standalone from a tween?

For example, if I want to create a ScrollTrigger object like:
ScrollTrigger.create({ trigger: elem, onEnter: function() { animateFrom(elem) }, })

It doesn't seem to be exposed globally.

I have a nuxt 2 application using nuxt-gsap-module when I try to access this.$gsap inside any project, it shows errors for $gsap not found. The same error populates down during build and causes issue even though I have it in buildModules for nuxt.config.ts

Hi @ivodolenc,

first of all, thank you for this great module. It’s pretty handy!

The current version is missing the CSSPlugin (CSSRule doesn’t work without it).
Would you be so kind and integrate it?

Thank’s in advance!

hi @ivodolenc , can you add this module to nuxt modules website ?

Steps to Reproduce

Trying to automate killing and creation of ScrollSmoother by using nuxt hooks in a plugin, because .refresh() doesn't seem to recalculate parallax effects.

// ./plugins/scrollsmoother,ts

export default defineNuxtPlugin((nuxtApp) => {

  const createScroller = () => nuxtApp.$ScrollSmoother.create({
      autoResize: true,
      smooth: 2, 
      effects: true
    })


  // create ScrollSmoother in app mounted
  nuxtApp.hook("app:mounted", () => {
    createScroller()
  })


  // refresh or kill+create on route change
  nuxtApp.hook("page:finish", (e) => {
    // $ScrollSmoother.refresh() exists, but doesn't recalculate all data for parallax, etc.
    nuxtApp.$ScrollSmoother.refresh()

    // $ScrollSmoother.kill() does not exist, but GSAP docs recommend it
    nuxtApp.$ScrollSmoother.kill()

    // Logging the nuxtApp, we can see $ScrollSmoother functions, but 'kill' is not present.
    console.log('nuxtApp: ', nuxtApp);

  })
})

Current Behavior

Seems that the ScrollSmoother.kill function is not available on the module.

Expected Behavior

Expected that all GSAP functions would be available on the module.

Additional Details

Nuxt 3.9.0
Vue 3.4.1

Love the module anyway! I've given you a star

Version

No response

Hi,

I am trying to get Draggable working with an slider example. The example works fine in codepen
https://codepen.io/pauloguerraf-the-scripter/pen/oNZvqRL

But when trying to adapt it and use it with nuxt-gsap-module the slides never snap or show inertia. I think it has to do with not having access to the endX parameter and "this" scope between gsap and nuxt but not completely sure. Any help would be greatly appreciated

the following is my current nuxt code. hope it helps. thank you

<template>
  <section id="wrapSection" ref="wrapSection">
    <div id="masterWrap" ref="masterWrap">
      <div id="panelWrap" ref="panelWrap">
        <section></section>
        <section></section>
      </div>
    </div>
    <div ref="dots" class="dots"></div>
    <div class="titleWrap">
      <div class="title">slide 1</div>
      <div class="title">slide 2</div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      colorArray: ['#683A5E', '#262626'],
      slides: null,
      container: null,
      master: null,
      dur: 0.5,
      oldSlide: 0,
      activeSlide: 0,
      dots: null,
      navDots: [],
      offsets: [],
      iw: 0,
      dragMe: null,
    }
  },
  mounted() {
    this.slides = this.$refs.panelWrap.querySelectorAll('section')
    this.container = this.$refs.panelWrap
    this.master = this.$refs.masterWrap
    this.iw = window.innerWidth

    this.initSlider()
    this.dragMe = this.$Draggable.create(this.container, {
      type: 'x',
      edgeResistance: 0.9,
      snap: this.offsets,
      inertia: true,
      bounds: '#masterWrap',
      onDragEnd: this.animDrag,
      allowNativeTouchScrolling: false,
      zIndexBoost: false,
    })
    this.sizeIt()
    window.addEventListener('wheel', this.slideAnim)
    window.addEventListener('resize', this.sizeIt)
  },
  methods: {
    initSlider() {
      for (let i = 0; i < this.slides.length; i++) {
        this.$gsap.set(this.slides[i], {
          backgroundColor: this.colorArray[i],
        })
      }
    },
    sizeIt() {
      this.offsets = []
      this.iw = window.innerWidth
      this.$gsap.set(this.container, { width: this.slides.length * this.iw })
      this.$gsap.set(this.slides, { width: this.iw })
      for (let i = 0; i < this.slides.length; i++) {
        this.offsets.push(-this.slides[i].offsetLeft)
      }
      this.$gsap.set(this.container, { x: this.offsets[this.activeSlide] })
      this.dragMe[0].vars.snap = this.offsets
    },
    slideAnim() {
      this.oldSlide = this.activeSlide
      this.activeSlide = this.offsets.indexOf(this.endX)
      this.activeSlide = this.activeSlide < 0 ? 0 : this.activeSlide
      this.activeSlide =
        this.activeSlide > this.slides.length - 1
          ? this.slides.length - 1
          : this.activeSlide
    },
  },
}
</script>

<style lang="scss">
#wrapSection {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #1d1d1d;
  font-family: Asap, sans-serif;
}

#masterWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#panelWrap {
  height: 100%;
}

section {
  height: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: relative;
  float: left;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  position: relative;
  background-color: #fff;
  margin: 12px 8px;
  cursor: pointer;

  float: left;
}

.dots {
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: 16px;
}

#leftArrow {
  left: 12px;
}

#rightArrow {
  right: 12px;
}

.arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  cursor: pointer;
  opacity: 0.75;
  width: 40px;
  height: 40px;
  stroke-width: 8px;
  stroke: white;
  fill: transparent;
}

h1 {
  position: absolute;
  z-index: 100;
  font-size: 18px;
  text-align: center;
  width: 100%;
  text-transform: capitalize;
}

span {
  display: block;
  font-size: 0.75em;
  font-weight: 400;
}

.titleWrap {
  height: 30px;
  position: absolute;
  z-index: 20;
  bottom: 50px;
  left: 50%;
  overflow-y: hidden;
}

.title {
  height: 30px;
  line-height: 30px;
  text-align: center;
}

h3,
p {
  padding: 0;
  margin: 0;
}

h3 {
  font-size: 1.5em;
}

p {
  max-width: 400px;
  font-weight: 400;
  text-align: center;
}

.twitterFollow:hover {
  background: white;
  color: #000;
}

.hideMe {
  opacity: 1;
}
.iconWrap {
  width: 300px;
  margin-top: 30px;
}
</style>