Fixing test positioning Y issue (#17071)

VicenteCartas · web-flow · commit 22f09f8b771a · 2025-08-27T00:23:30.000+02:00
Text was positioned incorrectly because the Y=0 of the text is at the baseline of the text (at the bottom), and then it goes upwards. This is different from other shapes like vector paths or rectangles. Confirmed the behavior with After Effects: <img width="3810" height="2034" alt="image" src="https://github.com/user-attachments/assets/36c73ca5-c441-4e40-b257-c1128148dac7" /> Also removing the flag to ignore transparency animations as transparency needs to be calculated even without animations (as layers visibility affects transparency).
diff --git a/packages/dev/lottiePlayer/src/animationConfiguration.ts b/packages/dev/lottiePlayer/src/animationConfiguration.ts
@@ -46,11 +46,6 @@ export type AnimationConfiguration = {
      * Default is 4.
      */
     easingSteps: number;
-    /**
-     * Whether to ignore opacity animations for performance.
-     * Default is true.
-     */
-    ignoreOpacityAnimations: boolean;
     /**
      * Whether to support device lost events for WebGL contexts.
      * Default is false.
@@ -71,6 +66,5 @@ export const DefaultConfiguration = {
     scaleMultiplier: 5, // Minimum scale factor to prevent too small sprites,
     devicePixelRatio: 1, // Scale factor,
     easingSteps: 4, // Number of steps to sample easing functions for animations - Less than 4 causes issues with some interpolations
-    ignoreOpacityAnimations: true, // Whether to ignore opacity animations for performance
     supportDeviceLost: false, // Whether to support device lost events for WebGL contexts,
 } as const satisfies AnimationConfiguration;
diff --git a/packages/dev/lottiePlayer/src/nodes/controlNode.ts b/packages/dev/lottiePlayer/src/nodes/controlNode.ts
@@ -12,7 +12,6 @@ export class ControlNode extends Node {
     /**
      * Constructs a new control node.
      * @param id Unique identifier for the node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
      * @param inFrame Frame at which the node becomes active.
      * @param outFrame Frame at which the node becomes inactive.
      * @param position Position of the node in the scene.
@@ -23,7 +22,6 @@ export class ControlNode extends Node {
      */
     public constructor(
         id: string,
-        ignoreOpacityAnimations: boolean,
         inFrame: number,
         outFrame: number,
         position?: Vector2Property,
@@ -32,7 +30,7 @@ export class ControlNode extends Node {
         opacity?: ScalarProperty,
         parent?: Node
     ) {
-        super(id, ignoreOpacityAnimations, position, rotation, scale, opacity, parent);
+        super(id, position, rotation, scale, opacity, parent);
         this._inFrame = inFrame;
         this._outFrame = outFrame;
 
diff --git a/packages/dev/lottiePlayer/src/nodes/node.ts b/packages/dev/lottiePlayer/src/nodes/node.ts
@@ -9,7 +9,6 @@ import { ThinMatrix } from "../maths/matrix";
  */
 export class Node {
     private readonly _id: string;
-    private readonly _ignoreOpacityAnimations: boolean;
     private readonly _position: Vector2Property;
     private readonly _rotation: ScalarProperty;
     private readonly _scale: Vector2Property;
@@ -165,26 +164,16 @@ export class Node {
     /**
      * Constructs a new node.
      * @param id Unique identifier for the node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
      * @param position Position of the node in the scene.
      * @param rotation Rotation of the node in degrees.
      * @param scale Scale of the node in the scene.
      * @param opacity Opacity of the node, from 0 to 1.
      * @param parent Parent node in the scenegraph.
      */
-    public constructor(
-        id: string,
-        ignoreOpacityAnimations: boolean,
-        position?: Vector2Property,
-        rotation?: ScalarProperty,
-        scale?: Vector2Property,
-        opacity?: ScalarProperty,
-        parent?: Node
-    ) {
+    public constructor(id: string, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node) {
         this._isVisible = false;
 
         this._id = id;
-        this._ignoreOpacityAnimations = ignoreOpacityAnimations;
 
         this._position = position || { startValue: { x: 0, y: 0 }, currentValue: { x: 0, y: 0 }, currentKeyframeIndex: 0 };
         this._rotation = rotation || { startValue: 0, currentValue: 0, currentKeyframeIndex: 0 };
@@ -224,19 +213,9 @@ export class Node {
         if (parent) {
             this._worldMatrix = this._globalMatrix;
 
-            // if (parent.isAnimated || !parent.parent || this.isAnimated || parent._isControl) {
             this._parent = parent;
             parent._children.push(this);
             this._localMatrix.multiplyToRef(parent._worldMatrix, this._globalMatrix);
-            // } else {
-            //     // We can merge them
-            //     this._localMatrix.multiplyToRef(parent._localMatrix, this._localMatrix);
-
-            //     // New parent
-            //     this._parent = parent.parent;
-            //     this._localMatrix.multiplyToRef(this._parent._worldMatrix, this._globalMatrix);
-            //     parent.parent._children.push(this);
-            // }
         } else {
             this._worldMatrix = this._localMatrix;
         }
@@ -304,9 +283,7 @@ export class Node {
             }
         }
 
-        if (!this._ignoreOpacityAnimations) {
-            this._updateOpacity(frame);
-        }
+        this._updateOpacity(frame);
 
         for (let i = 0; i < this._children.length; i++) {
             this._children[i].update(frame, isUpdated || isParentUpdated);
diff --git a/packages/dev/lottiePlayer/src/nodes/spriteNode.ts b/packages/dev/lottiePlayer/src/nodes/spriteNode.ts
@@ -22,25 +22,15 @@ export class SpriteNode extends Node {
     /**
      * Creates a new SpriteNode instance.
      * @param id Unique identifier for the sprite node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
      * @param sprite The sprite associated with this node.
      * @param position The position of the sprite in the scene.
      * @param rotation The rotation of the sprite in degrees.
      * @param scale The scale of the sprite in the scene.
      * @param opacity The opacity of the sprite.
      * @param parent The parent node in the scene graph.
      */
-    public constructor(
-        id: string,
-        ignoreOpacityAnimations: boolean,
-        sprite: ThinSprite,
-        position?: Vector2Property,
-        rotation?: ScalarProperty,
-        scale?: Vector2Property,
-        opacity?: ScalarProperty,
-        parent?: Node
-    ) {
-        super(id, ignoreOpacityAnimations, position, rotation, scale, opacity, parent);
+    public constructor(id: string, sprite: ThinSprite, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node) {
+        super(id, position, rotation, scale, opacity, parent);
 
         this._sprite = sprite;
         this._originalWidth = sprite.width;
diff --git a/packages/dev/lottiePlayer/src/parsing/parser.ts b/packages/dev/lottiePlayer/src/parsing/parser.ts
@@ -271,7 +271,6 @@ export class Parser {
 
         const trsNode = new ControlNode(
             `ControlNode (TRS) - ${layer.nm}`,
-            this._configuration.ignoreOpacityAnimations,
             layer.ip,
             layer.op,
             transform.position,
@@ -314,7 +313,6 @@ export class Parser {
     private _parseNullLayer(layer: RawLottieLayer, transform: Transform, parent: Node): Node {
         return new Node(
             `Node (Anchor) - ${layer.nm}`,
-            this._configuration.ignoreOpacityAnimations,
             transform.anchorPoint,
             undefined, // Rotation is not used for anchor point
             undefined, // Scale is not used for anchor point
@@ -364,20 +362,14 @@ export class Parser {
         };
 
         positionProperty.startValue.x += spriteInfo.centerX;
-        positionProperty.startValue.y -= spriteInfo.centerY; // Invert Y
         positionProperty.currentValue.x += spriteInfo.centerX;
-        positionProperty.currentValue.y -= spriteInfo.centerY; // Invert Y
 
-        // if (this._rawFonts) {
-        //     // If we have raw fonts, we can set the font information on the sprite
-        //     const font = this._rawFonts.get(layer.t.d.k[0].s.f);
-        //     positionProperty.startValue.y += font!.ascent! / 2;
-        //     positionProperty.currentValue.y += font!.ascent! / 2;
-        // }
+        // For text, its Y position is at the baseline, so we need to offset it by half the height of the text upwards
+        positionProperty.startValue.y += spriteInfo.centerY;
+        positionProperty.currentValue.y += spriteInfo.centerY;
 
         return new SpriteNode(
             "Sprite",
-            this._configuration.ignoreOpacityAnimations,
             sprite,
             positionProperty,
             undefined, // Rotation is not used for sprites final transform
@@ -427,19 +419,10 @@ export class Parser {
         }
 
         // Create the nodes on the scenegraph for this group
-        const trsNode = new Node(
-            `Node (TRS)- ${group.nm}`,
-            this._configuration.ignoreOpacityAnimations,
-            transform.position,
-            transform.rotation,
-            transform.scale,
-            transform.opacity,
-            parent
-        );
+        const trsNode = new Node(`Node (TRS)- ${group.nm}`, transform.position, transform.rotation, transform.scale, transform.opacity, parent);
 
         const anchorNode = new Node(
             `Node (Anchor) - ${group.nm}`,
-            this._configuration.ignoreOpacityAnimations,
             transform.anchorPoint,
             undefined, // Rotation is not used for anchor point
             undefined, // Scale is not used for anchor point
@@ -482,7 +465,6 @@ export class Parser {
 
         new SpriteNode(
             "Sprite",
-            this._configuration.ignoreOpacityAnimations,
             sprite,
             positionProperty,
             undefined, // Rotation is not used for sprites final transform
diff --git a/packages/tools/devHost/src/lottie/main.ts b/packages/tools/devHost/src/lottie/main.ts
@@ -29,7 +29,6 @@ export async function Main(): Promise<void> {
         scaleMultiplier: 5, // Minimum scale factor to prevent too small sprites,
         devicePixelRatio: 1, // Scale factor,
         easingSteps: 4, // Number of steps to sample easing functions for animations - Less than 4 causes issues with some interpolations
-        ignoreOpacityAnimations: true, // Whether to ignore opacity animations for performance
         supportDeviceLost: false, // Whether to support device lost events for WebGL contexts,
     };
 
