Documentation - custom transitions

[Tommertom]

Hi there

Any info you can share about the API to include custom transitions/animations at transitions? We need to follow v2 docs?

Any ideas on the timelines for documentation/next releases?

Regards Tom

[jakobrosenberg]

Hi Tom. The next release will feature an upgraded API that completely changes what's possible in Routify in terms of state and transitions. Once that's done, I'll try get documentation done.

If you give me your use case, I'll try to work around that and get it covered first if possible.

[Tommertom]

Hi

Thx for this. Let me explain what I am trying to achieve, and then see if I can be specific enough for you to help me.

So, as you may remember, I am working on integrating Svelte with Ionic. Ionic gives web developers a very nice and easy way to create a native feel to mobile apps. It does so, amongst others, by creating nice animations and transitions to whatever happens in the UI. Like a ripple effect on buttons, animation of modals etc.

For page transitions they have this really cool transition which is more than just a single page fly-in - what I am doing now.

It looks into the various elements of the incoming component and gives them specific transitions. Like the header-title, the default back-button and the page itself. Also the outoging component gets this special treatment as a whole and for its elements.

For now I have been able to pin down this transition in their code. And here an example link to the transition in ios: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/transition/ios.transition.ts

The function responsible for adding the transitions to the dom elements seems to be :

   const transition = (
      enteringEl: HTMLElement,
      leavingEl: HTMLElement,
      direction: any, // TODO types
      showGoBack: boolean,
      progressAnimation: boolean,
      animationBuilder?: AnimationBuilder
    ) => {

(taken from the vue implementation -and I need to check how it relates to the ios.transitions.ts)

As you can see, the API requires the enteringElement and the leaving element, besides a directions. The showGoBack is related to the BackButton mostly shown top left or top right corner. animationBuilder is I believe a customer animation and the boolean I don't know, but probably not of big interest for now.

So, the question is how to hook this up in Routify. Maybe through the helpers you have? But I also think/fear/believe a more deeper connection might be needed. Here the initial guidance from you would come in handy.

Secondly, but that is more of a bigger challenge - if the above does not work - I suspect a wrapper on top of the Routify runtime is needed to make the full experience work. Also evidenced by the fact that Ionic's React,Vue and Angular implementation in Ionic have done so to make it work. https://github.com/ionic-team/ionic-framework/tree/main/packages/vue-router

The bigger picture here, as I said, is to get Svelte and Ionic connected. And interestingly, a recent conversation with Ionic's CEO Max Lynch shows that the router implementation is the biggest headache to come around adoption of a new framework in their ecosystem. Which is my personal objective here. https://twitter.com/maxlynch/status/1544309849785245698

Together with Routify maybe? :)

Thx anyway!

[Tommertom]

Moving to SvelteKit with my project - so we can close this for my part.

[jakobrosenberg]

Hi @Tommertom . Sorry I completely missed the follow up. Good luck with the project. 🙂

[Tommertom]

Thx - also for the earlier support - good luck you too! Has been a pleasure working with your goodies.