Possible to do page transitions?

So I just realized, while Frontity is built with React, it’s pretty different than a website made with react like ustwo.com because Frontity is server side rendered. Static websites etc make for really fast load times, but does that mean it’s not possible to do any preloading in the background or have it transition between pages?

Sure, you can do page transitions with Frontity.

@David and I did a little experiment with react-spring. It’s probably not perfect, but it’s a start :slight_smile:

What we did:

  1. We used the useTransition hook of react-spring and used state.router.link to trigger the new animations:
const transitions = useTransition(state.router.link, link => link, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });
  1. We put everything in <Body> inside a the transitions map returned by react-spring:
{transitions.map(({ item, props, key }) => {
        const data = state.source.get(item);
        return (
          <animated.div key={key} style={props}>
            <Absolute>
              <Body>
                {data.isFetching && <Loading />}
                {data.isArchive && <List data={data} />}
                {data.isPostType && <Post data={data} />}
                {data.is404 && <Page404 />}
                {data.content}
              </Body>
            </Absolute>
          </animated.div>
        );
      })}

Instead of getting our data from the state.router.link variable, we use the link (called item) that transitions gives us. react-spring takes care of storing the previous value for us.

  1. We passed that data to both <List> and <Post> components. They are not “hardcoded” to state.router.link anymore, they can render what you pass them in the data prop. This is needed because during the animation, both the new and the previous <Body> need to coexist, but render different links.

  2. We added a new styled component called <Absolute> that makes everything under <Body> absolute. This is needed because during the animation, both the new and the previous <Body> need to coexist and be on top of each other.

const Absolute = styled.div`
  position: absolute;
  width: 100%;
`;

As I said, it’s probably not perfect, but it’s a start :slight_smile:

3 Likes

Awesome, I’m going to take a crack at this. I don’t know react super well yet, but I think I can follow this gist of what you’ve got here, considering I converted a wordpress theme to use transitions using a vanilla javascript plugin previously and I have some sense of what’s going on here.

This seems to me something that might be good to introduce into the core functionality of frontity. For me the main reason for wanting a React frontend is because it can feel snappier due to the virtual dom and the ability to preload assets in the background. Page transitions are a big part of enhancing that snappiness and making it feel clean and not jarring.

1 Like

Absolutely :slight_smile:

It took us a while to understand how react-spring works but, once we got it, it was super simple.