CODEWITHSUNDEEP
react-routergsapreact-transition-group
Bram z
Bram z

Reputation: 725

How to animate react router v4 (with react-router-config) with JS

I would like to know how to setup JS (non css) animations with react router v4 and react-router-config. (I use GSAP to handle basic animations)

Upvotes: 1

Views: 718

Answers (3)

Kevin Williams
Kevin Williams

Reputation: 244

I wrote an component for react native. It could be modified to use react-spring instead of the react native animation package and work with standard react.

https://javascriptrambling.blogspot.com/2020/07/react-router-native-animatedswitch.html

Upvotes: 0

user10645790
user10645790

Reputation: 1274

You can define your animations on custom Link component, like this:

<Link
  to="/some-path"
  transition="glide-right"
/>

But of course there would be a lot of work to do with the route...

There is a package for that, react-tiger-transition.

It does use some CSS, but the main transitions are made by js, as you would like.

The demo:

demo-gif

PS - I'm the author.

Upvotes: 0

Bram z
Bram z

Reputation: 725

Found a good example with an almost identical setup. Managed to get it to work with my setup (React Transition Group V2, React Router v4 and React Router Config) using an Switch componenent.

As the example doesn't use React Router Config and React Router Config compiles with a Switch by default (as seen in inspect elements > React tab), I added an Switch manually. The reason I did this was because without an location={this.props.location} attribute on the Switch, it would duplicate the new component as entering AND leaving componenent.

I'm curious how my hard coded Switch negates the auto rendered Switch.

            <TransitionGroup>
                <Transition
                    key={this.props.location.pathname}
                    onEnter={(node) => {
                        console.log(node, 'enter')
                    }}
                    onExit={(node) => {
                        console.log(node, 'exit')
                    }}
                    onExited={() => {
                        console.log('exited')
                    }}
                    timeout={{ enter: 300, exit: 200 }}
                >
                    <Switch location={this.props.location}>
                        {renderRoutes(this.props.route.routes)}
                    </Switch>
                </Transition>
            </TransitionGroup>

Upvotes: 1

Related Questions