akrdesign
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by akrdesign
-
-
@tempest054 You can start here.
See the Pen dyLJRWL by akrdesign (@akrdesign) on CodePen
- 1
-
@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!
-
3 minutes ago, akrdesign said:
Or I guess you don't need these two lines of code.
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger)
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.
See the Pen ZEPgKde by akrdesign (@akrdesign) on CodePen
-
6 hours ago, Rodrigo said:
@Rodrigo Thank you so much!! You are superb...
-
14 hours ago, Rodrigo said:
Hi,
just use the same code of the last demo but inside a useGSAP instance:
https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx
Hopefully this helps.
Happy Tweening!
@Rodrigo When I am dragging the slider it is not working smoothly. What could be the mistake? I am looking something like this
See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen
-
11 hours ago, Rodrigo said:
Hi,
just use the same code of the last demo but inside a useGSAP instance:
https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx
Hopefully this helps.
Happy Tweening!
@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
-
On 11/24/2023 at 8:19 PM, Cassie said:
@Cassie Thanks for your response now can you please help me with this https://stackblitz.com/edit/react-7ogfwx?file=src%2FApp.js
-
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
-
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.
- 3
-
@vacho And here is the React.JS version 👇
https://codesandbox.io/s/spin-on-scroll-example-x0utqn?file=/src/CircleAnimation.tsx- 3
-
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
See the Pen jOebQMJ?editors=0010 by akrdesign (@akrdesign) on CodePen
just need to create mouseenter and mouseleave event
- 3
-
@Chriis I have made an example as you need maybe it will help you
See the Pen NWOGaNv?editors=0010 by akrdesign (@akrdesign) on CodePen
I have placed the SVG on the top of the image and animated it.- 5
-
@Rodrigo Thank you so much sir😍
- 1
-
Try pinSpacing: false
- 3
-
@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
-
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
How do I recreate this click to expand animation?
in GSAP
Posted
Also using this.
See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen