brunu Posted March 1 Share Posted March 1 Hello Guys, first time playing around with Gsap and I'm stuck on creating a horizontal card, I've been trying for a while (that's why my code got messy) so I'll need a hand I tried to use the snap behavior but the card is not locking in where it was supposed to, it's skipping part of the next content, can someone help me with it? This is my code example: https://gsap-react-basic-f48716-pgxybg.stackblitz.io If possible, I'd like also to add a not smooth scroll just like this example See the Pen LYRwgPo?editors=1010 by GreenSock (@GreenSock) on CodePen , what should I do? Thanks! See the Pen by (@) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 1 Solution Share Posted March 1 I'm not sure what you mean by "not smooth scroll", but the problem with the snap position in your demo was that you didn't set ease: "none" on your animation, thus there was move movement at the beginning than the end due to "power1.out" being the default ease. And I'd strongly recommend using the useGSAP() hook for React: https://stackblitz.com/edit/gsap-react-basic-f48716-e9uf9f?file=src%2FApp.js Hopefully that gets you going in the right direction. 1 Link to comment Share on other sites More sharing options...
brunu Posted March 1 Author Share Posted March 1 14 minutes ago, GreenSock said: I'm not sure what you mean by "not smooth scroll" The example I sent the animation seems to be more abrupt while mine seems to be more smooth with next section taking place gradually 15 minutes ago, GreenSock said: thus there was move movement at the beginning than the end due to "power1.out" being the default ease I see, thank you so much 16 minutes ago, GreenSock said: I'd strongly recommend using the useGSAP() hook for React Getting advantage to ask, I tried that before, I was getting this error whenever calling the hook, any idea why? maybe this is a repository question, didn't bother to get help since working around it worked "gsap": "^3.12.5", "@gsap/react": "^2.1.0", "next": "12.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", Link to comment Share on other sites More sharing options...
GreenSock Posted March 1 Share Posted March 1 21 minutes ago, brunu said: The example I sent the animation seems to be more abrupt while mine seems to be more smooth with next section taking place gradually Is this something you still want help with? If so, can you be very specific about what the current demo isn't doing that you want it to do? I read your description a few times and it's still very fuzzy to me. If you want the snapping to be faster, you can define a duration in the snap object. 23 minutes ago, brunu said: I was getting this error whenever calling the hook, any idea why? maybe this is a repository question, didn't bother to get help since working around it worked "gsap": "^3.12.5", "@gsap/react": "^2.1.0", "next": "12.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", It's almost impossible to troubleshoot that without seeing it reproduced in a demo. I'm not sure what could be causing that error in your project unless maybe React wasn't defined or something. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
brunu Posted March 1 Author Share Posted March 1 7 minutes ago, GreenSock said: Is this something you still want help with? If so, can you be very specific about what the current demo isn't doing that you want it to do? I read your description a few times and it's still very fuzzy to me. If you want the snapping to be faster, you can define a duration in the snap object. It's almost impossible to troubleshoot that without seeing it reproduced in a demo. I'm not sure what could be causing that error in your project unless maybe React wasn't defined or something. 🤷♂️ yeah maybe that's just faster, I keep playing with it, thanks I'll refactor everything over here and in case I can't fix the hooks problem I can open another topic That's all I appreciate your help! 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