Can't get black scene transitions to be smooth between scenes

Hi so my issue is this:
i'm trying to implement some kind of transition animation between my scenes, it's a simple black cavas moving with an animator attached to a parent obj, but for 1 frame when it loads the new scenes it just flickers with what is behind the canvas and then it loades my animation, this is driving me crazy.
i'll share a video i made to get you understand what i mean:
MINUTE 0:34 you will see it happen

this happens only when a new scene is loaded, i made it go frame by frame in the video so you could see what happens
if someone could help me figure out what's going on it would be awesome

 

You Canvas seems to be in the Scene named "pre_Sandbox", but when your scene loads the top level scene is "Sandbox". Since the hierarchy is collapsed we can't see what happens to it, and it's animator greys out... but I assume you're not loading the next gameplay scene additively, and we're actually looking at a new instance of the Canvas.

Hence, I assume the Canvas is loaded again "with" the new scene and this is causing the flickering. There's two ways to fix this issue. The simplest one is to DontDestroyOnLoad your canvas. That way it can stay in "pre_Sanbox", doesn't get unloaded when "pre_Sanbox" is unloaded. Just remember to trigger the existing instance's animator instead of the new one.

A little more complex, but you could create a dedicated top level scene that dictates all this load logic, never gets unloaded, and loads in new scenes additively while hiding it behind the canvas. You basically keep a top level scene loaded at all times and switch out the gameplay scene(s) as needed. Also handy for storing other persistant data, as DontDestroyOnLoad can get messy further down the line of development.

I hope my hunch is right.

 

Thank you, i'll try your suggestion

 

Hi, so i delayed this problem like a dumb while i did other mechanics in my project and i tried your dontdestroyonload suggestion but I am still battling with this, it still get the flicker when loading a new scene i don't know why, i'll try other approaches dumping the animator and trying with tweening, but it just get the canvas transparent for a split second when it loads the scene, i also tried this in a blank new project, this is driving me crazy lol

this is what i used, the animation are really simple

Code (CSharp):

1.   public  IEnumerator LoadTransition(int num)
2.     {
3.         transitionAnim = GameObject.FindGameObjectWithTag("Transition");
4.         transitionAnim.GetComponent<Animator>().SetTrigger("end");
5.         yield return new WaitForSeconds(1.5f);
6.         SceneManager.LoadScene(num);
7.          transitionAnim.GetComponent<Animator>().SetTrigger("start");
8.  
9.     }

 

Ok, so i don't know if anyone ever will read this but i discovered something weird:
Till now i did this by hovering a canvas with an image over my already established canvas with the UI, but i tried in doing the transition with instead a gameobject which dontdestroyonload and with a sprite renderer and making it follow the camera and hover over it when i needed it, and it worked as i wanted, but it was rendered behind the UI so i had to change the canvas of the ui to screen space - camera, i don't know if this is a better approach rather than doing it with a canvas.
But i tried then again with the canvas and i discovered that if i take the canvas with my image from screen space overlay to screen space camera it doesn't flicker anymore when loading a new scene and work as intended.
i don't know why all of this is happening cause in a lot of tutorials i have seen i didn't witnessed this problems...maybe i'll try starting a new test project and doing this in a blank space.
also i think i'll swap from doing the animation with the animator to do it with a Tween because it kinda annoy me to do this simple animation with the animator, and also i would like to set the transition to be inactive when i'm not using it and coordinating this with the animator would be a lot more difficult.

If someone could direct me towards some explanations or some "right" way to do a transition i'm open to it

Edit: by debugging i discovered that now this happens only when i reload the scene but not when i get to a new scene (before you ask i implemented a singleton and not only a random dontdestroy )

Edit2: i found what seems to be causing this flickering it's the Cinemachine, if i use a normal camera this doesn't happen but i tried this in a blank project and there the cinemachine with the transition works, this is driving me crazy

Edit3:: i'm an idiot i found the issue with a script in the cinemachine which was conflicting