VueJS Gsap

[silverd 1 Likes (Newbie)]

Hello I have just this error and I have no idea why 

gsap_dist_ScrollTrigger__WEBPACK_IMPORTED_MODULE_12__.ScrollTrigger.scrollerProxy is not a function

The scrollTrigger works perfectly, I just wanted to add some smooth to my scroll  so I added that part 
 

      // Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });

      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

the import works perfectly otherwise my timeline below would not works 
 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

import Scrollbar from "smooth-scrollbar";

so I am a bit confused because that part works fine
 

let sections = gsap.utils.toArray(".linkProject");

      let tl = gsap.timeline({
        defaults: { ease: "expo.inOut" },
        scrollTrigger: {
          trigger: ".projectsListing",
          scrub: 1,
          // markers: true,
          toggleActions: "restart pause reverse pause",
          end: "bottom 90%",
          // end: () =>
          //   "+=" + document.querySelector(".projectsListing").offsetHeight,
        },
      });

      tl.from(sections, {
        y: -120,
        opacity: 0,
        duration: 1.45,
        transformOrigin: "center",
        scale: 0.45,
        stagger: 0.75,
      });

the only part doesn't working in this is the end function he doesn't seem understand offsetHeight or offsetWidth but that is an other topic and probably related to vuejs  
 

[GreenSock 18,232 Likes (Superhero)]

Sounds like you just need to update to the latest version of ScrollTrigger/GSAP.  You are probably using a version from before we added scrollerProxy(). 😁

[silverd 1 Likes (Newbie)]

ah yes now I have no more error   but it's not working anymore everything is hidden but thanks no more error 

[silverd 1 Likes (Newbie)]

I have no error and the smooth scroll work perfectly but when I put it into the default layouts of vueJs all the animation depending of scroll-trigger doesn't work anymore 
did I forget something ? 

 

// Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });

      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

 

[ZachSaucier 7,126 Likes (Superhero)]

Hey silverd. It'd be helpful if you made a minimal demo for us to look at this in context. This thread talks more about doing so:

 

[silverd 1 Likes (Newbie)]

Hello Zach thanks I will try it's just complicate because the project is on nuxtjs (vuejs) and so the document.body is probably weirdly understood by this framework because every time I uncomment that

// Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });
      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

everything outside the screen is hidden like with the overflow hidden but I can scroll just nothing to see  
I will try to do something on codepen or something like that for vue  

[ZachSaucier 7,126 Likes (Superhero)]

We don't need to see your whole project. It's often times best to start from the ground up and recreate your situation.