CODEWITHSUNDEEP
vue.jsnuxt.jsscrollmagic
Alrick
Alrick

Reputation: 91

How add ScrollMagic in nuxt project?

I am trying to add ScollMagic in my Nuxt project, I followed this article: https://nuxtjs.org/guide/plugins & I've added ScrollMagic.js in nuxt.config.js and I got this issue: ReferenceError window is not defined.

module.exports = {
 plugins: [
    { src: '~plugins/ScrollMagic', mode: 'client' }
  ],
}

Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'

I still have this issue...

Even if cover it like this: 

if (process.client) {
  Vue.use(ScrollMagic)
}

Upvotes: 4

Views: 4661

Answers (5)

MD.ALIMUL Alrazy
MD.ALIMUL Alrazy

Reputation: 330

use the cdn and integrate in 'nuxt.config.js'.

script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
 {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

In component

Anim() {
    if (process.browser && window) {
      const ScrollMagic = window.ScrollMagic;
      const bookTimeline = new TimelineMax({});
      bookTimeline
        .from(".hmbookservice-container", 0.6, {
          yPercent: 20,
          opacity: 0,
          ease: Power4.easeOut,
          clearProps: "all"
        })
        .from(
          ".hmservice-textwrap h4",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.1"
        )
        .from(
          ".hmservice-btnwrap",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.2"
        );

      const bookController = new ScrollMagic.Controller();
      const bookAnimScene = new ScrollMagic.Scene({
        triggerElement: ".hmbookservice-container",
        reverse: false,
        offset: -200
      })
        .setTween(bookTimeline)
        .addTo(bookController);
    }
  }
  mounted() {
    if (process.browser && window) {
      this.Anim();
    }
  }

Upvotes: 1

RikLamers
RikLamers

Reputation: 451

This is answering Drew Baker.

I think you are making it more complicated than it should be. Using GSAP with Nuxt is fairly simple.

  1. npm install gsap in your terminal.
  2. In the file you want to animate something, import gsap. In the script tag: import { gsap } from 'gsap'.
  3. use GSAP like you're used too. const lt = gsap.timeline();.

If you still want to use GSAP as I explained in the other comment:

  1. Follow the steps 1 & 2 from the other comment.
  2. In step 3 of the previous comment, create a file called 'gsap.js' in there import Vue and GSAP.
import Vue from 'vue';
import { gsap } from 'gsap';

Object.defineProperty(Vue.prototype, '$gsap', { value: gsap });

Hope this helps you @Drew Baker!

Upvotes: 2

RikLamers
RikLamers

Reputation: 451

I know this question is a bit old, but maybe someone will find my sulotion helpfull.

EDIT: Also, this way you can register any plugin to nuxt :).

So what I did:

1. npm i scrollmagic

  1. Go to nuxt.config.js and add the following to your plugins section:

{ src: '~/plugins/ScrollMagic.js', mode: 'client' }

This will make sure that scrollmagic will only be included in the client. This prevents the window undefined error.

  1. Go to the plugins folder, or make it in your root folder and make a new file called ScrollMagic.js. In here add the following:
import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

Object.defineProperty(Vue.prototype, '$scrollmagic', { value: ScrollMagic });

This snippet will make the variable $scrollmagic available in every component/page. You can call this.$scrollmagic to use it. For example const controller = new this.$scrollmagic.Controller();

Hope this helps anyone.

Upvotes: 15

ronael
ronael

Reputation: 11

currently what works is to use the cdn and integrate in 'nuxt.config.js'. Like this :

      head: {
...
script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

in the component :

export default {
mounted () {
  if (process.client) {
    var controller = new ScrollMagic.Controller()
    var scene = new ScrollMagic.Scene({ triggerElement: '#trigger1' })

      // exemple : trigger animation by adding a css class

      .setClassToggle('#animate1', 'zap')
      .addIndicators({ name: '1 - add a class' }) // add indicators (requires plugin)
      .addTo(controller)
  }
}}

you can use this method for other puglins that wouldn't work on nuxt by using npm or [puglins]

Upvotes: 1

zhrivodkin
zhrivodkin

Reputation: 71

For Vue / Nuxt projects you can use vue-scrollmagic plugin.

Upvotes: 0

Related Questions