Page transition - custom?



Would love a simple guide on custom page transitions. Thanks!



bump! on this request :slight_smile:


Here’s a very basic example:
Page Transition (3.6 KB)

If you set page transition to custom, you’ll have to use the “Transition Position” output to do all the animations yourself, Noodl won’t play any animation at all.

If you start a “Page Navigation” the Transition Position of the current page will go from 0 to -1. For the new page that’s coming in it goes from 1 to 0.

“Page Navigation Back” does the opposite. Transition Position starts at 0 for the current page and moves to 1, the old page that’s being moved in starts at -1 and goes to 0.

In the example above I just used simple Number Remappers to do all the transition, but you can also start animations, use Drag nodes, and more.

Hope this helps!