This section provides details for developers looking to understand or customize the animation system.

The core GSAP animation keyframes (the from and to states) are now defined in a centralized JavaScript file: Resources/Public/JavaScript/Core/animation-definitions.js.

If you need to add new animation types or modify the fundamental properties (like starting/ending positions, opacity, scale, rotation, etc.) of existing animations, this is the primary file to edit. Both the backend preview and the frontend rendering use these definitions.

The animation preview in the TYPO3 backend has been improved to offer a more accurate visual representation of how content elements will animate. Key improvements include:

• A more content-like placeholder for the preview.
• The preview now accurately reflects the configured duration, delay, and easing settings selected in the content element's animation configuration.

While the core animation definitions are centralized, the behavior of individual content element animations on the frontend can be further customized using data-gsap-* attributes directly in your Fluid templates or content element markup. These attributes include:

• data-gsap-duration: Overrides the default duration (in milliseconds).
• data-gsap-delay: Sets a delay before the animation starts (in milliseconds).
• data-gsap-easing: Specifies a GSAP easing function (e.g., power2.inOut, bounce.out).
• data-gsap-once: Set to true if the animation should only play once when scrolling down. By default, animations replay when scrolling up and down past the element.

This approach allows for fine-tuning animations on a per-element basis without altering the core definitions.