Jump to content
Search Community

akrdesign

Members

  • Posts

    25

  • Joined

  • Last visited

 Content Type 

Posts posted by akrdesign

    Can someone please help me out with this...? Its showing ScrollTrigger is missing even if its present there. Invalid property scrollTrigger set to {} Missing plugin? gsap.registerPlugin()

    in GSAP

    Posted

    @Suyash Surve Hey brother!! Basically here you have to write scrollTrigger (s is small) and not ScrollTrigger.

    tl.to(camera.position, {

      x: -5,

      z: -5,

      ease: "power1.inOut",

      scrollTrigger: {

        trigger: ".section-two",

        scrub: 1,

        markers: true,

        start: "top bottom",

        end: "top top",

      },

    });

    Trying to create Draggable slider in react.js (Help me with this)

    in GSAP

    Posted

    20 hours ago, Chriis said:

    @akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import: 

    gsap.registerPlugin(Draggable)

     

    Thanks for your response, the error that was coming earlier has been fixed. This is my first time using the Draggable plugin. I think I'm doing it right but my slider is not working. https://codesandbox.io/p/sandbox/gallant-fog-dfjsq9?file=%2Fsrc%2FPicker.js

    ScrollTrigger matchmedia not correctly works

    in GSAP

    Posted

    Hello, the first time I tried ScrollTrigger.matchmedia and it was not working properly. In the example, the link you can see 4 cards on the desktop when the user scrolls all cards move on the x-axis, and it works well on the desktop. But on mobile when we scroll card does not move properly I mean the last card does not show clearly. Actually, I have already solved this problem by just adding some numbers on scrollTrigger end value. But I want to know any other possible way to fix it, because how I can know how many numbers need to add when the card number increases like 8, or 10?

     

    The Example Link: https://stackblitz.com/edit/nextjs-uc7lzw?file=templates%2FCenterSection%2FCenterSection.tsx,styles%2Fglobals.css,pages%2F_app.tsx

    Gsap Pin Problem in Next.js

    in GSAP

    Posted

    This is my code https://github.com/akrdesign/gsap-pin-problem.git . I'm using Next.js and TypeScript. I have made three sections, one at the top, one in the center, and one at the bottom. I am trying to pin the center section and it's pinning too. You will see some navigation in the header, as soon as I switch from the home page to the About page, I get to see an error which is [NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.]. When I remove the pin from the scrollTrigger timeline then it runs perfectly. The section in which the problem is occurring will be found in the code on the home page inside the templates folder. I was trying to show the example on codesandbox but it could not be setup. That's why I have given the link of GitHub. Forgive me for this.🙏Also i provide code file

    gsap-pin-problem.zip

×
×
  • Create New...