Skip to content

Storybook: Page content fades in and out - #2647

Merged
manuq merged 3 commits into
mainfrom
storybook-fade
Aug 4, 2026
Merged

Storybook: Page content fades in and out#2647
manuq merged 3 commits into
mainfrom
storybook-fade

Conversation

@alcole2

@alcole2 alcole2 commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

When you flip a page in the Storybook, what's currently on the page will fade out, the page flipping animation will play, and then the new page content will fade in.

Resolves #2645

When you flip a page in the Storybook, what's currently on the page will fade out, the page flipping animation will play, and then the new page content will fade in.
@alcole2
alcole2 requested a review from a team as a code owner August 3, 2026 15:31
@alcole2 alcole2 linked an issue Aug 3, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown

Play this branch at https://play.threadbare.game/branches/endlessm/storybook-fade/.

(This launches the game from the start, not directly at the change(s) in this pull request.)

@alcole2
alcole2 requested a review from manuq August 3, 2026 15:59

@manuq manuq left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Storybook is looking good with the fade out / fade in! There is one error to fix.

@onready var ui_container: Control = %StoryBookContent


func _fade_out_ui():

@manuq manuq Aug 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an error reported on this line. You probably see it as well in the script editor in yellow:

image

I think you can fix it by:

  • Adding "void" as return type, same as in the _fade_in_ui() function.
  • Awaiting for the tween.finished signal instead of returning it.

Check Awaiting signals or coroutines:

Using the await keyword with a signal or a call to a function that is also a coroutine will immediately return the control to the caller. When the signal is emitted (or the called coroutine finishes), it will resume execution from the point on where it stopped.


if old_index != -1:
await _fade_out_ui()
ui_container.visible = false

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would make the added functions _fade_out_ui() and _fade_in_ui() more consistent, by moving this immediate ui_container.visible = false to the _fade_out_ui(). Because _fade_in_ui() already does ui_container.visible = true before tweening.

@manuq manuq left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alcole2 sorry, have you tested it? Now the fade-in doesn't happen because of (1) the container is set to invisible before the tweening happens, not after. And there is a new error now (2) because there is no await tween.finished at the end of the function.

Image

@alcole2

alcole2 commented Aug 3, 2026

Copy link
Copy Markdown
Contributor Author

I tested it, I couldn't tell if the fade out was the same or not but assumed it was because it didn't look that different from before. I'll fix it, sorry about that!

@manuq

manuq commented Aug 3, 2026

Copy link
Copy Markdown
Collaborator

I tested it, I couldn't tell if the fade out was the same or not but assumed it was because it didn't look that different from before. I'll fix it, sorry about that!

no problem!

@manuq manuq left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent! Works nice now and without any errors.

@manuq
manuq merged commit c68b261 into main Aug 4, 2026
7 checks passed
@manuq
manuq deleted the storybook-fade branch August 4, 2026 00:44
@manuq

manuq commented Aug 4, 2026

Copy link
Copy Markdown
Collaborator

Could be that this works only with the a single 2-pages table of contents? If I try the storybook_test.tscn I see no fading when turning to the second 2-pages ToC: https://play.threadbare.game/branches/endlessm/main/#menus/storybook/components/storybook_test

recording.webm

@alcole2 can you open a followup task about this?

@alcole2

alcole2 commented Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

@manuq Sure! I made a new task and pull request for it, #2652

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Storybook: fade page content in and out during page flips

2 participants