React Draggable Picker

[Ilima]

Hey folks, I found this Codpen and would love to achieve this in React using Hooks, but having a little problem. Does anyone have this sample in React Hooks?

See the Pen YrXdGZ by osublake (@osublake) on CodePen

[ZachSaucier]

Hey Ilima. We're happy to answer specific questions that you have but the chances are low that someone here will convert it to React for you for free. 

 

With that being said, this thread has a GSAP 3 version of that demo that you can start from:

 

[Ilima]

Hey @ZachSaucier sorry for not addressing specific issues from the start, I had a lot of issues at that time, and was curious at first if someone have done it.

And no, I'm not looking for easy answers here, don't get me wrong way. I created sandbox and I think I'm getting really close now, but having a bit trouble with TimeLine gsap.timeline and accessing two of the Refs which are GSAP target null not found

 

Here is my current code: https://codesandbox.io/s/language-y1pet?file=/src/Language.jsx 

 

[ZachSaucier]

17 hours ago, Ilima said:

accessing two of the Refs which are GSAP target null not found

Any time you see that error you should check what your targets are and if they're correct or not. 

 

In your demo picker.current returns null. I'm not much of a React guy, but if I'm not mistaken, you should use [] as the second parameter of the useEffect so that it only runs once. And do your timeline creation inside of that. Like this: https://codesandbox.io/s/language-forked-kubjy?file=/src/Language.jsx:1960-1962

[Ilima]

Hey @ZachSaucier, thank you for replying. I think I just fixed the GSAP target null not found by moving this piece of code to useEffect.

 

gsap.set(picker.current, {

perspective: 1100,

height: wrapHeight - cellHeight

});

 

But for some reason nothing really has changed, I think something wrong with the animation itself. I see the animation on reload plays for few seconds and the items in cell are stuck one on top of another. Could it be the problem with this code?

 

let tl = gsap.timeline({ repeat: 1 });

tl.to(element, 1, { y: "+=" + wrapHeight, rotationX: -rotationX }, 0);

tl.to(

element,

cellStep,

{ color: "#009688", scale: 1, repeat: 1, yoyo: true },

0.5 - cellStep

);

baseTl.add(tl, index * -cellStep);

 

 

 

[ZachSaucier]

Sorry, I don't see any animation happening and I am not understanding what you're trying to do. 

[Ilima]

Hey @Rodrigo could you please help me with this issue. I'm sure that something is wrong with my current code in sandbox, I've been trying to find on what exactly I did wrong but no luck yet. When I edit the line for animation gsap.timeline({ repeat: -1, paused: false })  from paused: true to false I see the animation happening in a fast way, but if I put it to the true again then I don't see any animations happening. I'm sure I did something wrong with the way I edited  gsap2 to gsap3 or maybe there's some code that still needs to be edited to GSAP version 3. 

[Rodrigo]

Hi,

 

Right now I don't have a lot of time to dive into this, but taking a quick look at your code and Blake's sample there are a few things I spotted. First the approach you're using to set the initial position of each element is not working, as every element is above it's parent container. Second the proxy element that Blake uses as target of the Draggable instance is an actual DOM node, in your case you're using an object, which is not working.

 

If I was you I'd first manage to position the elements correctly. Then create and successfully run the animations to move the elements up and down. Finally create the Draggable instance to actually manage those animations.

 

Happy Tweening!!!