Skip to content

Animations: hardening to prevent animations on first page#14404

Merged
swissspidy merged 4 commits intomainfrom
fix/1st-page-anims
Nov 24, 2025
Merged

Animations: hardening to prevent animations on first page#14404
swissspidy merged 4 commits intomainfrom
fix/1st-page-anims

Conversation

@swissspidy
Copy link
Collaborator

Summary

Addresses report at https://wordpress.org/support/topic/older-stories-have-blank-pages-elements-that-wont-load/

1st page animations are usually prevent in the editor, but one could still move a page with animations to the front. But then they would be prevented by the format itself. However, that doesn't seem to be the case (anymore?). This caused elements to be hidden in their pre-animation state.

This PR fixes this in two ways:

  1. Do not wastefully print the actual animations markup for the first page. This only applies when actively saving a story in the editor.
  2. Add CSS to reset visibility of animated elements on the first page. This applies to any published story, avoiding the need to re-save a story to fix this.

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #

@swissspidy swissspidy added Type: Bug Something isn't working AMP Output Issues related to AMP output and validation Package: Output /package/output labels Nov 24, 2025
@gemini-code-assist
Copy link

Summary of Changes

Hello @swissspidy, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces robust measures to ensure that animations are correctly suppressed on the first page of a story. The primary goal is to prevent a scenario where elements on the initial page might be inadvertently hidden due to animation states, thereby improving content visibility and user experience. The solution tackles both the generation of animation data during story creation and provides a runtime CSS fallback for existing stories.

Highlights

  • Animation Prevention: This pull request hardens the prevention of animations on the first page of a story, addressing a report where elements could remain hidden in their pre-animation state.
  • Two-pronged Solution: The fix is implemented in two ways: first, by preventing the actual animation markup from being printed for the first page when a story is saved in the editor; and second, by adding CSS to reset the visibility of animated elements on the first page for any published story, ensuring older stories are also fixed without requiring a re-save.
  • Improved User Experience: By ensuring that elements on the first page are immediately visible, this change improves the initial user experience and prevents content from appearing blank or partially loaded.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request hardens the system against animations on the first page by preventing animation markup generation and adding a CSS fallback. The changes are logical and well-implemented. I have one suggestion to improve the efficiency of how the CSS fallback is added by reusing an existing <style> tag, which will help keep the DOM cleaner.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 24, 2025

Size Change: +14 B (0%)

Total Size: 2.99 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/chunk-web-stories-glider-rtl.css 711 B 0 B
assets/css/chunk-web-stories-glider.css 711 B 0 B
assets/css/web-stories-block-rtl.css 4.53 kB 0 B
assets/css/web-stories-block.css 4.58 kB 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 767 B 0 B
assets/css/web-stories-editor.css 769 B 0 B
assets/css/web-stories-embed-rtl.css 670 B 0 B
assets/css/web-stories-embed.css 675 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.77 kB 0 B
assets/css/web-stories-list-styles.css 2.81 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 253 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 253 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 286 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 286 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 310 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 310 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 241 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 241 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 142 B 0 B
assets/css/web-stories-theme-style-twentyten.css 142 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 265 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 265 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 324 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 324 B 0 B
assets/css/web-stories-widget-rtl.css 459 B 0 B
assets/css/web-stories-widget.css 459 B 0 B
assets/js/3933.js 12.9 kB 0 B
assets/js/4032.js 4.74 kB 0 B
assets/js/6314.js 14.1 kB 0 B
assets/js/6531.js 98.9 kB 0 B
assets/js/6755.js 231 kB 0 B
assets/js/7512.js 7.99 kB 0 B
assets/js/7830.js 52.9 kB 0 B
assets/js/9391.js 95 B 0 B
assets/js/945.js 49.5 kB 0 B
assets/js/chunk-colorthief.js 2.63 kB 0 B
assets/js/chunk-ffmpeg.js 5.96 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 8.42 kB 0 B
assets/js/chunk-mediainfo.js 95 B 0 B
assets/js/chunk-opentype.js 97 B 0 B
assets/js/chunk-react-calendar.js 10.9 kB 0 B
assets/js/chunk-react-color.js 26.2 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-glider.js 3.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-0.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 537 B 0 B
assets/js/chunk-web-stories-template-1.js 9.12 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-10.js 7.18 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-11.js 8.74 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 494 B 0 B
assets/js/chunk-web-stories-template-12.js 8.53 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-13.js 6.84 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 580 B 0 B
assets/js/chunk-web-stories-template-14.js 7.2 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-15.js 8.68 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-16.js 10.4 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-17.js 8.96 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-18.js 9.16 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 9.05 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 584 B 0 B
assets/js/chunk-web-stories-template-2.js 8.93 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 8.57 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-21.js 9.31 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 523 B 0 B
assets/js/chunk-web-stories-template-22.js 7.34 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-23.js 6.87 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 516 B 0 B
assets/js/chunk-web-stories-template-24.js 11 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-25.js 6.74 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 598 B 0 B
assets/js/chunk-web-stories-template-26.js 6.86 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-27.js 7.6 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 8.67 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-29.js 8.8 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 533 B 0 B
assets/js/chunk-web-stories-template-3.js 8.16 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-30.js 7.32 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-31.js 9.82 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-32.js 12.1 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-33.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-34.js 7.33 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-35.js 8.61 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-36.js 11.8 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-37.js 6.09 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-38.js 7.53 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-39.js 7.7 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 562 B 0 B
assets/js/chunk-web-stories-template-4.js 11.6 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-40.js 9.73 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-41.js 7.37 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 6.76 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 555 B 0 B
assets/js/chunk-web-stories-template-43.js 8.37 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 579 B 0 B
assets/js/chunk-web-stories-template-44.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-45.js 7.06 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-46.js 5.08 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-47.js 8.8 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-48.js 8.68 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 515 B 0 B
assets/js/chunk-web-stories-template-49.js 8.48 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-5.js 9.43 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 504 B 0 B
assets/js/chunk-web-stories-template-50.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 527 B 0 B
assets/js/chunk-web-stories-template-51.js 9.89 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 603 B 0 B
assets/js/chunk-web-stories-template-52.js 9.89 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 553 B 0 B
assets/js/chunk-web-stories-template-53.js 5.61 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-54.js 7.4 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-55.js 6.88 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.45 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 527 B 0 B
assets/js/chunk-web-stories-template-57.js 14.2 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-58.js 5.37 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-59.js 8.66 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-6.js 6.87 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 513 B 0 B
assets/js/chunk-web-stories-template-60.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-7.js 7.05 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-8.js 8.24 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 577 B 0 B
assets/js/chunk-web-stories-template-9.js 8.14 kB 0 B
assets/js/chunk-web-stories-templates.js 638 B 0 B
assets/js/chunk-web-stories-textset-0.js 4.57 kB 0 B
assets/js/chunk-web-stories-textset-1.js 5.57 kB 0 B
assets/js/chunk-web-stories-textset-2.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-3.js 12.6 kB 0 B
assets/js/chunk-web-stories-textset-4.js 3.88 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.24 kB 0 B
assets/js/chunk-web-stories-textset-6.js 4.96 kB 0 B
assets/js/chunk-web-stories-textset-7.js 8.77 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.16 kB 0 B
assets/js/web-stories-activation-notice.js 25.4 kB 0 B
assets/js/web-stories-block-view.js 859 B 0 B
assets/js/web-stories-block.js 29.3 kB 0 B
assets/js/web-stories-carousel.js 2.25 kB 0 B
assets/js/web-stories-dashboard.js 94.6 kB 0 B
assets/js/web-stories-editor.js 1.64 MB +14 B (0%)
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-tinymce-button.js 6.46 kB 0 B
assets/js/web-stories-widget.js 554 B 0 B

compressed-size-action

@swissspidy swissspidy merged commit 64b03c4 into main Nov 24, 2025
52 of 54 checks passed
@swissspidy swissspidy deleted the fix/1st-page-anims branch November 24, 2025 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AMP Output Issues related to AMP output and validation Package: Output /package/output Type: Bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant