Jump to content
GreenSock

OSUblake

Using ScrollSmoother with Nuxt

Recommended Posts

For those looking to integrate ScrollSmoother with Nuxt, here's a solution that builds off some of the work by @Born05 in this thread.

 

CodeSandbox:

https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/layouts/default.vue

 

All you have to do is include the GSAPScrollSmoother and put whatever content you want inside of this.

 

<GSAPScrollSmoother :vars="{ smooth: 2, effects: true }">
  <Nuxt />
</GSAPScrollSmoother>

 

You'll be able to access the ScrollSmoother in any page/component using this.$scrollSmoother, and can use any of the methods available, for example.

this.$scrollSmoother.paused(true);
let velocity = this.$scrollSmoother.getVelocity();

 

There are also a couple of extra methods available.

 

$scrollSmoother.parseEffects()

Call this to get ScrollTrigger to parse and create effects that are declared with data attributes, (data-speed and data-lag). 

 

$scrollSmoother.killEffects()

Call this to kill all the ScrollSmoother effects. You will typically need to call this when navigating to a new page.

 

$scrollSmoother.refresh()

Refresh the ScrollSmoother and all ScrollTriggers. You should call this when navigating to a new page if you don't call .parseEffects()

 

There are really only 2 files you need to be concerned about. The GSAPScrollSmoother.vue component file, and the nuxt.config.js file. 

 

The nuxt.config.js has some pageTransition callbacks in there that you may need to adjust to your project. And if you plan on using this in your own project, be sure to change all the gsap-trial imports to gsap, otherwise you won't be able to deploy it. 

 

Example usage on a page...

export default {
  mounted() {
    // if you don't have any effects, use this.$scrollSmoother.refresh() instead
    this.$scrollSmoother.parseEffects();
    
    this.myAnimation = gsap.timeline({
      scrollTrigger: {
        ...
      }
    })
  },
  beforeDestroy() {
    // kill any ScrollTriggers you created
    this.myAnimation.scrollTrigger.kill();
    
    // kill the effects that were created
    this.$scrollSmoother.killEffects();
  }
}

 

 

 

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×