Example Transitions / Tutorial.

[jaydickinson]

Hey This is great!

Are you planning on doing a write up / tutorial on how you made some of the more complex transitions that would be super helpful, the slide and fade in ones look good but struggling to replicate?

Thanks again for making this.

[TylerBarnes]

Hey @jaydickinson, thanks! Glad you like it!

Yes, I'm actually working on a documentation site with a tutorial and examples as well as a blog post for gatsbyjs.org. I do want to make it easier to understand. I think it's not very complicated but the current readme isn't very good since I wrote it quickly with almost no planning.

In the meantime you could check out how I used TransitionLink in the AniLink component. You could start by reading the default fade transition code as that one is fairly simple. Once that makes sense you could check out the others. One thing I should note is that the code for the others is unnecessarily complex looking because I was trying to support using the same transition in many different ways. In an actual implementation on a site it could be very simple for complex looking transitions.

This might just be related to my own biases and experiences but I found using gsap to be the easiest way of doing these more complex types of transitions. If you've never used GSAP I highly recommend checking out some tutorials on that if you're interested. I hate tomatoes on youtube is a good resource.

If you have any specific problems I'm also happy to take a look and answer any questions.

[wildpow]

The link for the 'fade transition code` to broken in your post FYI.

[TylerBarnes]

Thanks @wildpow , updated the link! I had to move the default transitions as the original location was making gsap a mandatory dependency when it's not actually required.

[TylerBarnes]

I'm still planning on doing a more in depth tutorial (I've been super busy the last little bit). In the meantime I've posted a write up / mini tutorial at the gatsby blog for anyone that's interested.

[jserrao]

@TylerBarnes - outstanding work, really neat little plugin.

Something to consider for the tutorials: transitioning with nested components and TransitionLink. I like where you're going with gsap-driven animation - that's how I usually do things with TimelineLite.

But things get mighty tricky with passing state and this, and functional props around. I guess this is more of an advanced request but it's where I struggle with this. For example, let's say you have a header component with a link back to the homepage of your site - if someone clicks that link, how would you trigger a complex animation on a page/component a couple levels down the chain? That kind of thing, don't see an obvious way to do this with the tools you've provided.

Best of luck.

[TylerBarnes]

Hey @jserrao, thanks! I'll add an example like that for sure. My plan is to add a tutorial on doing advanced transitions with react-pose, react-spring, and gsap. In the meantime if you're playing around you might be able to mix react-gsap and the transitionstate component as I believe the point of react-gsap is to make gsap work better with the declarative nature of react.

If you were using straight gsap I would probably reference elements using id's when they're nested quite far away from the page root.

[jserrao]

I'll check that out thanks. For me, the holy grail is being able to handle page and click transitions with unique intro/outro sequences such that you can do sequential timelines. Another idea I've had with react would be something similar to a transition context that would contain an intro and outro animation that could be provided application-wide. Current efforts feel very heavy handed but that might just be that I don't know quite what I'm doing.

Ive never seen a library that can deliver that, it's always piecemeal and a huge mess under the hood. Maybe that gives you some ideas...

[TylerBarnes]

There's currently an internal context being used for transitions so the links can pass transition data to the page wrapper. When I get to #33 it will include an option for a default transition that you can specify in gatsby-config for all regular links. Right now the "default" transition is just all settings set to 0. The option would allow you to change that default.

[jserrao]

Interesting re: context for animations, just so much to learn. I've been in this field for 15 years and it there is always another huge thing I need to get into. Thanks.

[TylerBarnes]

@jserrao if you're interested and haven't checked it out before it's the React context API. https://reactjs.org/docs/context.html

The transitionstate component is also using it.

[el-pol]

@TylerBarnes is there any example out there on how to use it with react-spring? Especially with the hooks API. Thanks!