akrdesign

Also using this.https://codepen.io/GreenSock/pen/XWOeLEb

@tempest054 You can start here.https://codepen.io/akrdesign/pen/dyLJRWL

@Suyash Surve Can you also share the scene.gltf file as the path location ('/model/mapleTree/scene.gltf') does not exist in the codepen demo? so that I can check from my end. Thanks!

Please ignore this 🙏 I am wrong here

Or I guess you don't need these two lines of code. import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger)

Replace this line please with this import { ScrollTrigger } from 'gsap/dist/ScrollTrigger

@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", }, });

I have created this 3D carousel, currently it is working based on click event but I want to get this functionality based on scroll event. I set the height of the container is 100vh that's why scroll event is not calling anyone please help me with this.

@Rodrigo Thank you so much!! You are superb...

@Rodrigo When I am dragging the slider it is not working smoothly. What could be the mistake? I am looking something like this https://codepen.io/GreenSock/pen/RwKwLWK

@Rodrigo Thank you so much 💓

I am trying to create Draggable slider in react.js. You can see my code here https://stackblitz.com/edit/react-7ogfwx?file=src%2FApp.jshttps://codesandbox.io/p/sandbox/gallant-fog-dfjsq9?file=%2Fsrc%2FPicker.js%3A72%2C1

@Cassie Thanks for your response now can you please help me with this https://stackblitz.com/edit/react-7ogfwx?file=src%2FApp.js

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

I am trying to create Draggable slider in react.js but I am getting an error in Draggable.create. You can see my code here https://codesandbox.io/p/sandbox/gallant-fog-dfjsq9?file=%2Fsrc%2FPicker.js%3A72%2C1 Thanks in Advance

Actually I'm away from my laptop, so that's why I am give you one example of ScrollTrigger pin problem in react through link ? and the link is https://codesandbox.io/embed/pin-using-gsap-in-react-forked-m5ku4c?file=/src/App.js&codemirror=1 So basically you need to create ScrollTrigger inside the gsap context api. I hope this is helpful for you. And if you want know more about gsap context just read the doc.

@vacho And here is the React.JS version ? https://codesandbox.io/s/spin-on-scroll-example-x0utqn?file=/src/CircleAnimation.tsx

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

Hey @Adesh take a look maybe I made what you need https://codepen.io/akrdesign/pen/jOebQMJ?editors=0010 just need to create mouseenter and mouseleave event

@Chriis I have made an example as you need maybe it will help you https://codepen.io/akrdesign/pen/NWOGaNv?editors=0010 I have placed the SVG on the top of the image and animated it.

@Rodrigo Thank you so much sir?

Try pinSpacing: false

@GSAP Helper Thanks for replying!! You will see the problem with this link when you switch from home page to about page using navigation https://stackblitz.com/edit/nextjs-1vgseg?file=pages%2F_app.tsx,templates%2FHomePage%2Findex.ts,pages%2Findex.tsx,templates%2FHomePage%2FHomePage.tsx,pages%2Fabout-us.tsx,styles%2Fglobals.css

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

I am trying to pin section when section reached top of the window in react but it's doesn't works! but also use same logic for html file it's works. Please help me find out my it's not working in react. react file link :-https://codesandbox.io/s/pin-using-gsap-in-react-imqkh9?file=/src/App.js:358-376 html file link: - https://codesandbox.io/s/cranky-darkness-le0ic1?file=/app.js