stuck on simple cards horizontal scroll

[brunu]

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

[GreenSock]

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. 

[brunu]

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",

[GreenSock]

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. 🤷‍♂️

[brunu]

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!