Jump to content
Search Community

Import GSAP plugins with Nuxt.js

lucrampro test
Moderator Tag

Recommended Posts

Hi All !!

So i know other topic is open for similary problems but i dont have like error,
195463684_Annotation2020-06-02120858.thumb.png.bf737161872ffe5ef0292e56c1268cad.png
 can we help me for this error ?

my import code is 

 

// IMPORT LIBRARY
import { gsap, Expo } from 'gsap';
import { Draggable } from 'gsap/dist/Draggable.js';

gsap.registerPlugin(Draggable);

Thanks ADVANCE !! :) 

Link to comment
Share on other sites

Transpile the modules.

 

If you have nuxt set to universal mode (SSR), then you'll need to register any plugins client side.

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

if (process.client) {
  gsap.registerPlugin(Draggable);
}

 

 

  • Like 2
Link to comment
Share on other sites

thanks for your response :) but it dosn't work.. 
maybe i made error ?

 

// IMPORT LIBRARY
import { gsap, Expo } from 'gsap';
import Draggable from 'gsap/dist/Draggable.js';

gsap.registerPlugin(Draggable);

export default {
  build: {
    transpile: [
      "gsap"
    ]
  },

nb : in my app Nuxt is configurated in SPA mode :) 

Link to comment
Share on other sites

Add this to the build section in your nuxt.config.js

 

build: {
 transpile: [
   "gsap"
 ]
}

 

Import like this if you're using spa mode. 

import { gsap } from 'gsap';
import { Draggable } from 'gsap/Draggable.js';

gsap.registerPlugin(Draggable);

 

Import like this if you're using universal mode.

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

if (process.client) {
  gsap.registerPlugin(Draggable);
}

 

You don't need to import eases. They are strings now.

https://greensock.com/docs/v3/Eases

 

  • Like 3
Link to comment
Share on other sites

ok thanks for your time !! it's ok in my app with this solution 

:) 

// IMPORT LIBRARY
import { gsap, Expo } from 'gsap';
import Draggable from 'gsap/dist/Draggable.js';

// gsap.registerPlugin(Draggable);
if (process.client) {
  gsap.registerPlugin(Draggable);
}

export default {

  name: 'Draggable',

 

Link to comment
Share on other sites

  • 4 weeks later...

@OSUblake

Please, help! In my nuxt project gsap doesn’t work normaly.

In universal mode iI am registering a plugin in gsap.js

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"

if (process.client) {
  gsap.registerPlugin(ScrollTrigger);
}

Changing the config file

plugins: [
  // ssr: false to only include it on client-side
  { src: '~/plugins/gsap.js', ssr: false },
],

The result is an error "gsap is not defined"

 

Gsap only starts working if I connect it on the page where the component is imported.

<script>
  import Intro from '~/components/Intro'
  import gsap from "gsap"
  import ScrollTrigger from "gsap/ScrollTrigger"
  gsap.registerPlugin(ScrollTrigger);

Scroll, by the way, also does not work. I only see markers, but the animation does not work

mounted () {
  this.initPin()
},
methods: {
  initPin: function () {
    gsap.to("#animate1", {
      scrollTrigger: {
        trigger: "#trigger1",
        pin: "animate1",
        start: "top",
        end: "bottom",
        scrub: true,
        markers: true,
        id: "animate1"
      }
    });
  },
},

I need block 2  (animate1) to pin to the top of the screen when block 1 (trigger1)  touches the top of the screen. Block 2 remains pinned until the bottom of block 1 touches the bottom of block 2

 

 

Screenshot.jpg

Link to comment
Share on other sites

@OSUblake Thank you so much! I understand now!

 

Can you help me with one more question?

I'm trying to pin an element at the bottom of the screen until its parent element scrolls to the end.

It should work something like this: 

giphy.gif

This only works if initially the block with the text is at the top of the block with the picture. But then the block with the text sticks at the top of the screen. 

I need the opposite - the block with the text should be below the block with the picture. When the picture touch the top of the screen, the text should be pinned at the bottom of the screen and unpinned when the picture is completely scrolled.

 

See the Pen pogWYOG by yuliarushay (@yuliarushay) on CodePen

 

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.
×
×
  • Create New...