Skip to content

fix(framework): ensure animation mode work - #13941

Open
nnaydenow wants to merge 4 commits into
mainfrom
animation-mode
Open

fix(framework): ensure animation mode work#13941
nnaydenow wants to merge 4 commits into
mainfrom
animation-mode

Conversation

@nnaydenow

@nnaydenow nnaydenow commented Aug 17, 2026

Copy link
Copy Markdown
Contributor
  • Set --_ui5-animation-mode CSS variable on configurationAnimationMode.ts now calls createOrUpdateStyle
    (via document.adoptedStyleSheets) to keep --_ui5-animation-mode in sync with the configured animation mode, both
    on initial read and on every setAnimationMode call. Uses adopted stylesheets so the variable is not visible as an
    inline style in DevTools.

  • Add CommonStyles.css with animation suppression — a new @container style(--_ui5-animation-mode: none) block
    sets transition-duration and animation-duration to 0s on every element inside a component's shadow root when
    animation mode is none, ensuring animations complete instantly while preserving their end state.

  • Apply CommonStyles eagerlygetComponentStyles() now populates the stylesheet immediately from the
    pre-loaded packageMap instead of waiting for applyTheme to call updateComponentStyles, so the animation
    suppression rule is active from the very first render.

  • Convert duration to a functionanimate.ts exports duration as () => number instead of a static
    constant, so it reflects the current animation mode at call time. Updated all consumers (scroll.ts, slideDown.ts,
    slideUp.ts).

Test plan

  • ConfigurationChange.cy.tsx — verify --_ui5-animation-mode is set on :root and updates correctly via
    setAnimationMode
  • ConfigurationScript.cy.tsx — verify CSS variable matches the value from the config script
  • ConfigurationURL.cy.tsx — verify CSS variable matches the value from URL params and that script config takes
    precedence over URL
  • AnimationMode.cy.tsx — verify duration() returns 0 when mode is none and 400 otherwise; verify
    CommonStyles sheet is adopted into shadow roots and contains the --_ui5-animation-mode rule

@nnaydenow
nnaydenow deployed to netlify-preview August 17, 2026 09:49 — with GitHub Actions Active
@nnaydenow nnaydenow changed the title Animation mode fix(framework): ensure animation mode work Aug 17, 2026
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@nnaydenow
nnaydenow deployed to netlify-preview August 17, 2026 10:12 — with GitHub Actions Active
@nnaydenow
nnaydenow deployed to netlify-preview August 17, 2026 10:25 — with GitHub Actions Active
@nnaydenow
nnaydenow requested a review from ilhan007 August 17, 2026 10:37
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.

1 participant