Sliding scene transition

Does anyone have any suggestions for creating a sliding transition between scenes?

Tried using scene manager…
target: ‘Page1_2’,
duration: 6000,
moveBelow: true,
onUpdate: (progress) => {



You have to animate the camera viewports as well. I’ll try to make an example.

Thank you. I do not have much experience moving cameras.


You rock! Thanks so much

Really great sliding effect. I have implemented it without background images and the only problem is that the game objects of the target scene are shown for a split second before the transition begins. Do you have any idea why this happen and maybe a solution? :slight_smile:
regards Anne

Not sure but — avoid preload() in the transition target scene; avoid setting camera viewport width or height to 0; make sure scene is sleeping before transition (I added Scene Watcher Plugin to example above).

Thanks for answering :slight_smile: I don’t have preload, I just copied your code
cam.setViewport(0, 0, (1 - progress) * defaultWidth, cam.height);
cam.setScroll(progress * defaultWidth, 0);
targetCam.setViewport((1 - progress) * defaultWidth, 0, progress * targetDefaultWidth, targetCam.height);
for the sliding effect, and if I make the target scene sleep, nothing is shown in the scene.

You can try

cam.setViewport(0, 0, Math.max(1, (1 - progress) * defaultWidth), cam.height);
// …
  (1 - progress) * defaultWidth,
  Math.max(1, progress * targetDefaultWidth),

If that doesn’t work I would try the Scene Watcher plugin and check if the sleep/wake is working how you want.

Thank you very much for your answer. It does, however, not make a difference :frowning: I think the problem is that the transition happens right away before the viewport and scrolling calls. I can “fix” it by setting the target scene invisible for 1ms, then the game objects do not show up. However, I believe that is a hack. I will se if I can make the plug-in work. Thanks again!