Jump to content
Search Community

Grid layout animation

Animadraw test
Moderator Tag

Recommended Posts

  • 1 year later...

Okay, I figured out the issue... sort of. Because now I don't understand why my react example in the codepen did work lol!

 

To summarize the issue I was facing was that instead of animating between the before and after state, it would wait for a bit (the duration time) and then suddenly it would update the visualization to the new state.

 

In my first attempt to leverage in react, I was doing this:
```

function MyComponent() {

  const [pos, setPos] = React.useState(true);

 

  const handleClick = () => {

    const state = Flip.getState('.panel');

    setPos(!pos);

    Flip.from(state, { duration: 1, absolute: true});

  }

return (///)

}

```

I was able to get it working by doing this instead:

 

```

function MyComponent() {

  const [pos, setPos] = React.useState(true);

  const state = React.useRef();

 

  const handleClick = () => {

    state.current = Flip.getState('.panel');

    setPos(!pos);

  }

 

  React.useLayoutEffect(() => {

    if(state.current) {

        Flip.from(state.current, { duration: 1, absolute: true});

    }

  }, [pos])

return (///)

}

```

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