If I understand you correctly, to get your desired behaviour, it should be as straightforward as adjusting the initial, animate and exit props to fit your needs for each page separately. In the example I describe in the original post, we use the same props for both pages in order to gain the same transition when navigating through each page.
However, if you wanted to adjust, say, Page2's transition animation in, you simply need to change the properties for the Page2 component!
Here's an example. Below, Page1 would enter with a scaleY effect (stretching vertically), and Page2 would enter with a scaleX effect (stretching horizontally).
thanks so much for the thoughful reply!
I didn't quite make clear what I wanted to achieve:
Say I have pages A, B and C.
A link from page A to C should have a specific exit animation on A and a specific initial animation on C (say: A moves out to the left, C moves in from the right), while a link from B to C would have a different set (B exiting to the top, C moving in from the bottom). Think of a two-dimensional grid of pages you want to move around in.
Here's my somewhat clunky solution:
I first define a number of variants for initial and exit animations:
In my react-router Link I have an anonymous function run onClick that will cycle the exit animation if it's not the one appropriate for this very link.
You will notice I am also passing along a piece of state with the current pathname so the page loaded will correctly set the initAnimation in the container div.
This all works, but it feels convoluted. Especially with more than two animations to cycle through. If I wanted to have four exit variants I'd end up with this odd construction in every single Link element:
// order: "exitTop", "exitRight", "exitBottom", "exitLeft"// we want to cylce to exitBottom here...if(exitAnimation==="exitTop"){cycleExitAnimation()cycleExitAnimation()}elseif(exitAnimation==="exitLeft"){cycleExitAnimation()cycleExitAnimation()cycleExitAnimation()}elseif(exitAnimation==="exitRight"){cycleExitAnimation()}
(useCycle doesn't accept parameters, hence the weird multiple calls)
it's just a lot of redundancy for something that feels like it should easily achievable. Maybe there is a way that's more maintainable?
Cheers,
Willem
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Willem!
Glad you enjoyed the guide :)
If I understand you correctly, to get your desired behaviour, it should be as straightforward as adjusting the
initial
,animate
andexit
props to fit your needs for each page separately. In the example I describe in the original post, we use the same props for both pages in order to gain the same transition when navigating through each page.However, if you wanted to adjust, say,
Page2
's transition animation in, you simply need to change the properties for thePage2
component!Here's an example. Below,
Page1
would enter with ascaleY
effect (stretching vertically), andPage2
would enter with ascaleX
effect (stretching horizontally).You're not limited to just
scaleX
orscaleY
- it can be any combination of any CSS properties! I'm just using these as a simple example.Hope that helps!
Hey Sam,
thanks so much for the thoughful reply!
I didn't quite make clear what I wanted to achieve:
Say I have pages A, B and C.
A link from page A to C should have a specific exit animation on A and a specific initial animation on C (say: A moves out to the left, C moves in from the right), while a link from B to C would have a different set (B exiting to the top, C moving in from the bottom). Think of a two-dimensional grid of pages you want to move around in.
Here's my somewhat clunky solution:
I first define a number of variants for initial and exit animations:
I then use framer motion's useCycle hook to keep track of what exit animation is currently set in state:
I pass both the exitVariants and exitAnimation to my container element:
In my react-router Link I have an anonymous function run onClick that will cycle the exit animation if it's not the one appropriate for this very link.
You will notice I am also passing along a piece of state with the current pathname so the page loaded will correctly set the initAnimation in the container div.
This all works, but it feels convoluted. Especially with more than two animations to cycle through. If I wanted to have four exit variants I'd end up with this odd construction in every single Link element:
(useCycle doesn't accept parameters, hence the weird multiple calls)
it's just a lot of redundancy for something that feels like it should easily achievable. Maybe there is a way that's more maintainable?
Cheers,
Willem