Improve CSS: Use Custom Properties for Flexible Animations

[fellyph]

Refactor to use CSS Custom Properties for animation ranges (e.g. ) to fix the broken 'Custom' range feature. Ensure these properties are properly injected via PHP and JS.

[github-actions]

🤖 Hi @fellyph, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[fellyph]

@gemini-cli analyze this issue

[github-actions]

🤖 Hi @fellyph, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[github-actions]

🤖 AI Assistant: Plan of Action

I have analyzed the request and propose the following plan to fix the broken "Custom" range feature by refactoring the animation system to use CSS Custom Properties.

Resource Estimate:

• Estimated Tool Calls: ~10
• Files to Modify: 3 (src/index.js, src/style.css, my-scroll-block.php)

Proposed Steps:

• Step 1: Update CSS for Custom Properties

  • Define default values for --scroll-entry-start, --scroll-entry-end, --scroll-exit-start, and --scroll-exit-end in src/style.css.
  • Update entry-only animation rules to use animation-range: entry var(--scroll-entry-start) cover var(--scroll-entry-end).
  • Refactor in-out animations to use two separate animations (entry and exit) to allow full customization of both phases using animation-range with multiple segments.

• Step 2: Update JS to Inject Custom Properties

  • Modify src/index.js in both getSaveContent.extraProps and editor.BlockListBlock filters to inject these CSS variables into the block's style attribute.
  • Ensure variables are set correctly based on the animationEntryStart, animationEntryEnd, animationExitStart, and animationExitEnd attributes.

• Step 3: Update PHP to Inject Custom Properties

  • Modify the render_block filter in my-scroll-block.php to inject these CSS variables into the block's style attribute for front-end rendering, ensuring compatibility with dynamic blocks.

• Step 4: Verification

  • Verify that preset ranges (Quick, Slow, Late) still work as expected.
  • Verify that "Custom" range now correctly applies the user-defined percentages.

Please review this plan. To approve, comment @gemini-cli /approve on this issue. To make changes, comment changes needed.