lucrampro Posted June 2, 2020 Share Posted June 2, 2020 Hi All !! So i know other topic is open for similary problems but i dont have like error, 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 More sharing options...
OSUblake Posted June 2, 2020 Share Posted June 2, 2020 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); } 2 Link to comment Share on other sites More sharing options...
lucrampro Posted June 2, 2020 Author Share Posted June 2, 2020 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 More sharing options...
OSUblake Posted June 2, 2020 Share Posted June 2, 2020 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 3 Link to comment Share on other sites More sharing options...
lucrampro Posted June 2, 2020 Author Share Posted June 2, 2020 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 More sharing options...
OSUblake Posted June 2, 2020 Share Posted June 2, 2020 Why do you keep changing this? import { Draggable } from "gsap/dist/Draggable"; This is what I posted. import { Draggable } from 'gsap/Draggable.js'; Link to comment Share on other sites More sharing options...
OSUblake Posted June 2, 2020 Share Posted June 2, 2020 That's what adding the transpile part to nuxt.config.js solves. 1 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Share Posted June 30, 2020 @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 Link to comment Share on other sites More sharing options...
OSUblake Posted June 30, 2020 Share Posted June 30, 2020 1 hour ago, yulia said: Gsap only starts working if I connect it on the page where the component is imported. That's the correct way. Gsap isn't global, so you have to import it in every file where you use it. 2 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Share Posted June 30, 2020 @OSUblake Hmm, why then should I connect plugins in the config file? Link to comment Share on other sites More sharing options...
OSUblake Posted June 30, 2020 Share Posted June 30, 2020 1 minute ago, yulia said: Hmm, why then should I connect plugins in the config file? There is no reason to... unless you really want to make gsap global. gsap.install(window) But if you're trying to make it global, then you should probably just go ahead and use a CDN for better caching. https://cdnjs.com/libraries/gsap 2 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Share Posted June 30, 2020 @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: 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 More sharing options...
OSUblake Posted June 30, 2020 Share Posted June 30, 2020 Sorry, but I really don't have a lot of experience with ScrollTrigger. Try asking your question in a new topic. Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Share Posted June 30, 2020 @OSUblake Thanks a lot anyway) Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 @OSUblake She has already: 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now