This script gives users the ability to disable or enable all animations on a website, adhering to user preferences and system settings for reduced motion. It includes an on-page toggle that remembers user choices through cookies, ensuring a smooth and accessible experience for all visitors.

Key Features:

• User-controlled toggle to disable or enable animations.
• Remembers user preferences using cookies for up to 365 days.
• Automatically respects system settings for reduced motion.
• Disables animations on elements with a specific data attribute.
• Provides visual feedback through a toggle button and message notifications.

Design Elements:

• Fixed position toggle button that can be placed in any corner of the viewport.
• Customizable button colors and styles for better integration with site design.
• Notification messages that appear on user actions, styled for visibility.

Potential Use Cases:

• Websites with heavy animations that may distract or disorient users.
• E-commerce platforms where users may prefer a quicker browsing experience.
• Accessibility-focused websites aiming to cater to users with motion sensitivity.
• Educational platforms that require focused content delivery without distractions.
• Blogs or content sites where animations may detract from reading experience.

Conclusion: This component effectively enhances user experience by allowing control over animations, making it suitable for a variety of websites focused on accessibility and user preferences.