# Scene transitions

**URL:** <https://phaser.discourse.group/t/scene-transitions/13982>\
**Category:** Phaser 3\
**Created:** [February 13, 2024, 10:37am UTC](https://phaser.discourse.group/t/scene-transitions/13982 "2024-02-13T10:37:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![annebjerre](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@annebjerre](https://phaser.discourse.group/u/annebjerre)\
**Post date:** [February 13, 2024, 10:37am UTC](https://phaser.discourse.group/t/scene-transitions/13982/1 "2024-02-13T10:37:41Z")

</div>

Hi  
I have a problem with scene transitions. Before making the transition I fetch the target scenes main camera by getting the target scene with get method. It works the first time, but when I want to make the transition again, I can get the target scene again, but its main camera is now undefined. Does anyone know why this happens?

PS I stop the scene I make the transition to before going back to the first scene again. That is probably problem, but I need it to be stopped.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 13, 2024, 1:27pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/2 "2024-02-13T13:27:23Z")

</div>

When you stop a scene all of its cameras are discarded. You can probably use the transition callback or event handlers, though. Show the code?

---

<div class="post-metadata">

**Author:** ![annebjerre](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@annebjerre](https://phaser.discourse.group/u/annebjerre)\
**Post date:** [February 13, 2024, 1:29pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/3 "2024-02-13T13:29:40Z")

</div>

this is the code

```javascript
 this.cam = this.cameras.main;
    this.targetScene = this.scene.get('play'); 
    console.log(this.targetScene)
    this.targetCam = this.targetScene.cameras.main;
    console.log(this.targetCam)
     
    
    this.input.keyboard.on("keydown-UP",
      function () {
        this.scene.transition({
          target: "play",
          duration: 2000,
          onUpdate: function (progress) {
            this.cam.setViewport(0, 0, (1 - progress) * 500, 340);
            this.cam.setScroll(progress * 500, 0);
            this.targetCam.setViewport((1 - progress) * 500, 0, progress * 500, 340);
          }
        });
      },this
    );

```

in the play scene I start this scene again and stop play

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 13, 2024, 1:54pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/4 "2024-02-13T13:54:19Z")

</div>

```js
let targetCam;

this.scene.transition({
  target: "play",
  duration: 2000,
  onStart: function (fromScene, targetScene) {
    targetCam = targetScene.cameras.main;
  },
  onUpdate: function (progress) {
    this.cam.setViewport(0, 0, (1 - progress) * 500, 340);
    this.cam.setScroll(progress * 500, 0);

    targetCam.setViewport((1 - progress) * 500, 0, progress * 500, 340);
  }
});

```

---

<div class="post-metadata">

**Author:** ![annebjerre](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@annebjerre](https://phaser.discourse.group/u/annebjerre)\
**Post date:** [February 13, 2024, 2:18pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/5 "2024-02-13T14:18:15Z")

</div>

I cannot make this work, it seems like the onUpdate is called before onStar and the targetCam is undefined in the onUpdate call.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 13, 2024, 3:15pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/6 "2024-02-13T15:15:28Z")

</div>

```js
this.scene.transition({
  target: "play",
  duration: 2000,
  onUpdate: function (progress) {
    this.cam.setViewport(0, 0, (1 - progress) * 500, 340);
    this.cam.setScroll(progress * 500, 0);

    this.scene.get("play").cameras.main
      .setViewport((1 - progress) * 500, 0, progress * 500, 340);
  }
});

```

---

<div class="post-metadata">

**Author:** ![annebjerre](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@annebjerre](https://phaser.discourse.group/u/annebjerre)\
**Post date:** [February 13, 2024, 3:32pm UTC](https://phaser.discourse.group/t/scene-transitions/13982/7 "2024-02-13T15:32:44Z")

</div>

This works! Thank you very much!