Setup initial transition

[ajayns]

As per docs, I understand that the plugin triggers on Link click but I'd like to have an initial transition on page load. Is that possible using the plugin since it's not triggered by any button click but on pageload or a timeout maybe?

[flowen]

I was just wondering the same thing :)

I forked and looked a bit, but I don't quite understand it (and honestly I unfortunately don't have the time nor I believe the skills to create a PR) but I think on the initial pageload, the transitionStatus isn't changing.

Perhaps include it as an option to change transitionStatus on initial pageload.

I tested by adding some scss. Only the green border showed on initial load.

.tl-wrapper {
  transition: transform $d-slower $ease-out, opacity $d-slower $ease-out;

  &-status--entering {
    border: 5px solid red;
  }

  &-status--entered {
    border: 5px solid green;
  }

  &-status--exiting {
    border: 5px solid purple;
  }
}```

[TylerBarnes]

My initial thought was that this is outside the scope of this package, but I could see it being annoying if you have a component that's using the transition status and then you need to make it support a status from two different places if you were to handle it yourself. So with that in mind I'm thinking this could be added to the transition-state component. Perhaps with an api where you can pass to transition-state the same props that you can regularly pass to transition-link.

For example something like:

<TransitionState initialEntry={{ delay: 0.5, duration: 1 }}>
      {({ transitionStatus }) => {
        return (
            <Box
              className="box"
              pose={
                ['entering', 'entered'].includes(transitionStatus)
                  ? 'visible'
                  : 'hidden'
              }
            />
        )
      }}
</TransitionState>

I think I'd have to think on this a bit more and do some experimentation to hash out wether this is a good idea or not. What do you guys think?

[ajayns]

Considering the exact intention the package was built for, I'd agree that it's outside the scope. But this feature could turn out extremely useful for users. I'm considering the case a user is already using this package for transitions between pages and it is a common pattern for such webpages to have an initial entry transition as well. And as of now, I don't think there's an easy straightforward method to achieve that: https://github.com/gatsbyjs/gatsby/issues/7658

[flowen]

I think this would be a great optional enhancement, as @ajayns points out, there's no other solution for this kind of event. Initial loading animations could be very similar on deeper pages (I often see the homepage with a different loading animation), so for these pages it's kind of unnecessary to write similar code twice.

I'm not familiar with the react-pose code beneath, but I like the intialEntry prop!

[TylerBarnes]

Thanks for your input @ajayns and @flowen. I agree with you guys, this seems like a really useful feature for those cases.

[Sirk]

It could be really a great feature to get an initialEntry prop ! Would be really useful for props based animation, actually you got directly entered for transitionStatus on page load, and in some case you want to defer a little bit things. Getting a entering then after the initalEntry delay the entered would help a lot of use cases.

Thanks @TylerBarnes for this plugin btw.