Page Transitions with Parallel Geometric Figures

[rivella50]

Hi there,

i found your project today and it looks quite interesting. For a Flutter game i'm looking for outstanding page transitions like this: https://cdn.discordapp.com/attachments/421448406506930187/1157663347450335333/Screen_Recording_2023-09-30_at_14.59.52.mov?ex=6561f002&is=654f7b02&hm=c73d8d7abacf7785656648908ff81dcc50c8ab0a6579a79e680a2a990933ee90&

Do you know if such transitions would be possible being implemented with shaders? I'm mainly interested in having the possibility to transition between pages by using parallel appearing and assembled rectangles, triangles, hexagons, etc.

Thanks for your answer.

[alnitak]

Hi,

I discontinued this package in favor of another one, making adding new shaders simpler. It is still private and not yet public. It aims to have presets also for transitions, which you can see here https://gl-transitions.com/ There is something similar to the video you linked, but you should write your own shader for something particular.

I think early next year I will release the package and I will write here

[rivella50]

Ok, cool. So it's possible to achieve such transitions with shaders, that's good to know. I'm looking forward to your new package next year, sounds very interesting.

[rivella50]

Until your release: Could you please tell me what steps are needed in order to get this transition into a working page transition in my Flutter app?

[alnitak]

The answer to your question is huge! In big steps you should achieve that like:

1. grab page1 and page2 as images
2. feed that shader with those images
3. use the progress uniform of that shader to make the transition

Using the page transitions like Navigator does, I think it's more complicated. I didn't see if that is possible

[rivella50]

Phew, ok, that's some steps, indeed. I had something like this in mind for the transition:

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final shader = program.fragmentShader();
      shader.setFloat(0, 20);
      shader.setFloat(1, 0);
      shader.setFloat(2, 0);
      return ShaderMask(shaderCallback: (Rect bounds) => shader, child: child);
    }
  );
}

where loading the FragmentProgram on app startup:

late FragmentProgram program;

void main() async {
  program = await FragmentProgram.fromAsset('assets/shaders/polka.frag');
  runApp(
    MaterialApp(
      home: Page1(),
    ),
  );
}

Therefore i guess that your new package also won't have a solution for page transitions then, right?

[alnitak]

Actually, the new package can accept 2 children that could be either pages or asset images. The following GIF is made using this

and it is called like:

ShaderPresetCube(
   child1: Page1(),
   child2: Page2(),
   presetController: presetController,
)

[rivella50]

Thanks for the preview. Looking forward to the release.

[rivella50]

Et voilà:

https://github.com/alnitak/flutter_shader_fxs/assets/54292/94c12770-ab92-45f9-9950-31969b11464a

https://github.com/alnitak/flutter_shader_fxs/assets/54292/d8e222a9-0ce7-4975-b9f7-228d0379ff53

[alnitak]

Hey @rivella50,

I have released the packages! I think you will find them helpful and I am eager to hear from you! 1) shader_buffers aims to simplify the use of shaders with a focus on the ShaderToy.com and gl-transitions.com websites. 2) shader_presets A package that implements some ready-to-use shaders, like transitions from gl-transitions and effects from ShaderToy (using 1)

See you there!