Ilima
Ilima's Achievements
3
Reputation
-
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.
-
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);
-
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
-
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?
-
Thanks ? I think I figured it out. What I wanted to do is basically if state says "second" then move the box to the second option: https://codesandbox.io/s/gsap-draggable-react-hooks-4ez0l?file=/src/Box.jsx Thank you Team Green for the reactive help!
-
Ilima changed their profile photo -
Thank you on that! I use React Hooks as well, but my team is still using React Components ? Probably it will take some time for us to change everything to hooks ?
-
Yup ?? it worked! Thank you so much ☺️ Now I just need to figure out how to put the box on the second or third options based on database. Do you know any way to do that?
-
It's weird... I have the similar Draggable with onDrag function which passes this as instance of react function. Here is the Demo Example on that: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js For now I made the function work within the ComponentDidMount, and it worked: https://codesandbox.io/s/funny-haslett-jj95u?file=/src/Box.jsx But this is not the approach that would be good later. Is there a better way to find the Box and update the State? Or even move the Box based on State, the data will be based on db, where the box could be on the Second Grid or Third. (it's a similar logic like radio buttons, but instead of clicking on radio button we wanted to be able to move the button between options)
-
Unfortunately didn't do anything, same problem Here is the demo with those changes https://codesandbox.io/s/funny-haslett-jj95u?file=/src/Box.jsx
-
I need to be able to get the position of the box or a way to know where the box moved and update the state. onDragEnd I can't pass the this.x for some reason, not sure if I'm missing anything. Here is the Demo: https://codesandbox.io/s/stoic-wood-zuyel?file=/src/Box.jsx
-
Thank you so much! Solved my issue, also looks like I was just not using the state values. gsap.to(".dialGrip", 0.6, { rotation: function (i) { return i === 0 ? rotation * 2 : rotation * 3; }, stagger: 0, });
- 2 replies
-
- 1
-
-
- cycle stagger
- cycle
- (and 2 more)
-
I'm trying to make this codepen example into React. But unable to do it with new version of Gsap and also new to GreenSock's animation. Here is the current React example in sandbox: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js
-
Sorry again ? I think the link above doesn't work... Here is the link: https://codesandbox.io/s/gallant-morning-2ggfm
-
Hmm I think I just didn't save it... I'm new to Sandbox, can you see now?