Jump to content
GreenSock

Ilima

Members

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Posts posted by Ilima

    React Draggable Picker

    in GSAP

    Posted

    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. 

    React Draggable Picker

    in GSAP

    Posted

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

     

     

     

    React Draggable Picker

    in GSAP

    Posted

    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 

     

    onDragEnd Update React State

    in GSAP

    Posted

    21 hours ago, Rodrigo said:

    But the approach is basically get the data, update the component state and render the component based on the state properties. As I mentioned above, it all starts with the componentDidMount method. This sample asumes that you have an endpoint that returns an array of elements in JSON format:

     

    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!

    onDragEnd Update React State

    in GSAP

    Posted

    On 9/18/2020 at 5:47 PM, Rodrigo said:

    Using Jack's suggestion works fine: 

    
componentDidMount() {
  var gridWidth = 120;
  var gridHeight = 60;

  const toggleMode = this.toggleMode;

  this.mode = Draggable.create(".box", {
    type: "x",
    dragClickables: true,
    edgeResistance: 0.65,
    bounds: ".mode_container_inner",
    lockAxis: true,
    inertia: true,
    liveSnap: true,
    onDragEnd() {
      toggleMode(this.x);
    },
    snap: {
      x: function (endValue) {
        return Math.round(endValue / gridWidth) * gridWidth;
      },
      y: function (endValue) {
        return Math.round(endValue / gridHeight) * gridHeight;
      }
    }
  });
}

    Is that approach acceptable?

     

     

    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?

     

     

    onDragEnd Update React State

    in GSAP

    Posted

    1 hour ago, GreenSock said:

    Sorry, I accidentally had "()" after toggleMode. You're saving a reference to the function, not what it returns.  

    
var toggleMode = this.toggleMode;

    But things aren't working because you've got other problems in your React code like I said. Open the console and you'll see the error messages. 

     

    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)

    onDragEnd Update React State

    in GSAP

    Posted

    17 minutes ago, GreenSock said:

    I'm not a React guy, but it looks like you've got some other issues in your code: 

    Uncaught Error: Cannot remove node 3 because no matching node was found in the Store.
     

    But the problem in your onDragEnd() method is scope - "this" refers to the Draggable instance, but you're calling this.toggleMode(this.x); and there is no such thing as "toggleMode()" on the Draggable instance. You can correct this by storing it as a variable outside that function like: 

    
var toggleMode = this.toggleMode();

Draggable.create(... {
  onDragEnd() {
    toggleMode(this.x);
  }
});

    Does that help?

    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

    Unable to change staggerTo to version 3

    in GSAP

    Posted

    On 9/8/2020 at 2:11 PM, ZachSaucier said:

    Hey Ilima.

     

    The stagger docs cover how to use GSAP 3 staggers though I don't understand why a stagger is required as the original demo has 0 duration between each animation which is the same thing as not having a stagger.

     

    cycle was replaced by gsap.utils.wrap, as covered in the GSAP 3 release notes though I don't understand why that original pen used cycle at all, they could just use a functional value for the rotation property. 

     

    I think your issue is a React issue and I don't know enough about React to help. Maybe someone else will be able to help.

     

     

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

     

    • Like 1

    dragClickables: true doesn't work

    in GSAP

    Posted

    34 minutes ago, OSUblake said:

    Please make a demo on codesandbox.

    https://codesandbox.io/

     

    This is not needed.  

    
import { gsap, TimelineLite, TimelineMax, TweenMax, CSSPlugin } from "gsap";

     

    https://greensock.com/docs/v3/Installation?checked=core,draggable#esModules 

    
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

     

    This is incorrect. this.dial is null. 

    
this.dialPos = TweenMax.set(this.dial, {
  x: "+=0",
});

     

    Should be gsap.set(), but only after mounted.

     

    Sorry about the mess. Updated it and here is the link https://codesandbox.io/s/bold-ishizaka-6st9k?file=/src/drag.jsx

×
Login Create Account