Jump to content
Search Community

React Draggable Picker

Ilima test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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 

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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);

 

 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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!!!

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...