Hard-set opacity of tl-wrapper complicates overlapping animations

[sashafklein]

I'm trying to create an animation where the exiting page (A) slides down like to reveal the page that's already below it (B) (and a reverse animation where A enters by sliding up over B).

The effect is sort of like the reverse of a window curtain, where the curtain and window are the two "pages".

To do that, I want the Page A to always have the top z-index and be full opacity. (As well as B to be full opacity when it "exits" by having A slide up over it).

But it looks like the library sets opacity to automatically fade out the exiting component, which adds a concurrent fade-out to the animation.

Is there a way to disable this, or another way you'd suggest handling this animation?

If not, I'm happy to make a quick PR to add a prop to optionally disable the opacity style.

My current code (using Framer Motion) is basically this, at the moment:

          <motion.main
            style={{
              transition: `transform ${seconds}s ease`,
            }}
            variants={{
              in: { transform: "translateY(0%)" },
              out: { transform: "translateY(100%)" },
            }}
            animate={transitionStatus === "exiting" ? "out" : "in"}
          >

           ...

                      <TransitionLink
                        to={`some-path`}
                        exit={{
                          length: seconds
                        }}
                        // Next page should be position under the exiting page immediately, so it can slide down and reveal it.
                        entry={{ delay: 0 }}
                      >
                        ...

Only issue with exit is the aforementioned opacity control within the library.

[MainulDip]

I have fixed my issue with the exiting page's opacity 0 issue by putting "appearAfter" value with the same length value on the exit prop.