aholachek / react-flip-toolkit-router-example Goto Github PK

Can I just say that this is the coolest animation library I've ever seen.

I'm trying to integrate this with Next.js and having a hard time mapping the react-router App.js file with the _app.js used by Next.js

Any chance you could make a next.js example?

🙏

I think you have inner divs with fixed position. The icons are not visible if they go below view height. I added auto scroll and max height to the inverted div for a quick fix.

The same problem happens with your

"Image Transition Demo"

Someone can easily attribute the error with the toolkit, which is not the case.

Hi, thanks for an awesome lib! I was trying to make a page transition effect with the following structure

<Flipper flipKey={this.props.location.pathname}
    <Switch>
        <Route path='/' component={CardList}>
        <Route path='/card:id' component={CardPage}>
    </Switch>
</Flipper>

const CardList = () => {
    <div>
        <Flipped flipId='card1'>
            <Card>
        </Flipped>
        ...
        <Flipped flipId='card6'>
            <Card>
        </Flipped>
    </div>
}

const CardPage = (id) => {
    <Flipped flipId={`card${id}`}>
        *some page contect*
    </Flipped>
}

Basically, I have two pages, one page with 6 cards, another is just a page with all the info about a selected card. When I click the card it should expand to a full page. Everything is fine with page -> card transition, but card -> pagelooks bad. When I click the card the whole page disappears instantly and I see the animation of expanding page on a white screen. Looks like it is removed from DOM too early. What am I missing?

First, thank you for this awesome library. I am playing with the core version of it but I don't understand a particular behavior, I have these flipped elements, and want to animate the opacity to 0 when one element leaves the DOM.

The "problem" is that when the element is being re-inserted in the DOM, it has the opacity set to 0. Do the library cache the element before removing it?

        let el = document.querySelectorAll("figure").forEach((f, i) => {
          flipper.addFlipped({
            element: f,
            flipId: "square" + i,
            onStart: () => console.log("animation started!"),
            onComplete: () => console.log("animation completed!")
             onExit: (el, i, remove) => {
               snabbt(el, {
                 opacity: 0,
                 ease: "tween",
                 fromOpacity: 1,
                 complete: () => {
                   console.log("animation completed2", el);
                   remove();
                 }
               });
             }
          });
        });