Smooth transition

Support
1

Hi UES.IO community,

I want to apply a smooth transition effect (like fade or slide) when navigating between two screens.

Use case:
When a user clicks on a button, it should:

  1. Trigger navigation to the second screen
  2. Show the second screen with a smooth animation (not an instant switch)
2

@rbdwt09 Here you would use CSS. We currently support Tailwind. Here are some ideas you could try out:

Common Transition Utilities
• transition: Enables transitions for a set of safe properties.
• transition-all: Enables transitions for all animatable properties.
• transition-opacity: Targets opacity changes.
• transition-transform: Targets transform changes (like translating, scaling, etc.).
• Duration and timing can be specified with classes like duration-300, ease-in-out.

transition-opacity duration-500 opacity-0 animate-fadeIn

You can set up logic so that each new view renders with opacity-0 then transitions to opacity-100 using a class toggle or React state.

Good luck and looking forward to seeing your transition.

3

Can I write custom CSS in UESIO? If yes, where can I add it?

For example, I want to add a keyframe like this:

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

5

Hello @rbdwt09 -

Unfortunately, we do not currently support page/route transitions but this is a great idea! I’ve added it to our backlog feat: Support page transition effects · Issue #5054 · ues-io/uesio as a feature request.

Regarding custom CSS, we do not support the ability to write custom css currently so tailwind is the only way to style components in Uesio right now. We do have it in our backlog to make improvements so the overall styling solution so keep an eye out on our Releases · ues-io/uesio for updates along that line.

Thank you!

Regards,

-bds

6 
yes that worked we can close this issue thanks