KO – Animated Backgrounds

Adds reusable animated background utility classes for Divi modules, rows, columns, and sections.

Description

KO – Animated Backgrounds adds lightweight animated background layers to supported elements by class name.

Current supported class:

• motion-bg-yellow

The plugin injects the required background animation layers automatically. In Divi, you only need to add the class to a Section, Row, Column, or Module.

Installation

1. Upload the ko-animated-backgrounds folder to /wp-content/plugins/ or install the ZIP through WordPress Admin > Plugins > Add New > Upload Plugin.
2. Activate the plugin.
3. Add motion-bg-yellow to the CSS Class field of any Divi Section, Row, Column, or Module.

Usage

Add this class in Divi:

motion-bg-yellow

The plugin will automatically add the internal animation layers:

• ko-bg-gold
• ko-bg-orange
• ko-bg-light

No HTML or Code Module is required.

Notes

The JavaScript runs once on page load and only injects layers into elements that do not already contain them.

If content is dynamically loaded after page load, you can manually re-run:

window.koInitAnimatedBackgrounds();

Chrome on macOS Wide Display Fallback

The plugin detects Chrome on macOS and adds this class to the HTML element:

ko-chrome-mac

This allows the stylesheet to apply a targeted fallback for wide/high-DPI Mac displays, including XDR/P3 screens, where Chrome may flicker when compositing large blurred gradients, transforms, and blend modes.

The fallback does not change the required Divi class. Continue using:

motion-bg-yellow

Changelog

1.1.28

• Added Chrome-on-macOS detection for wide/high-DPI displays.
• Added targeted Chrome/Mac wide-display fallback CSS to reduce flicker on XDR/P3 screens in Chrome.
• Increased offscreen layer overscan only for affected Chrome/Mac wide layouts.
• Reduced the most expensive white/bloom blend compositing only under the Chrome/Mac fallback.

1.0.0

• Initial release with yellow/gold animated background support.