Skip to content

[amp-story] Provide an option in animation preset to disable image scaling for pan effects. #37932

@jingfei

Description

@jingfei

Description

The amp-story animation preset scales the pan effect image. For example, pan-right effect:

'pan-right': {
duration: 1000,
easing: 'linear',
keyframes(dimensions, options) {
const translateX = options[TRANSLATE_X_ATTRIBUTE_NAME];
const scalingFactor = calculateTargetScalingFactor(dimensions);
dimensions.targetWidth *= scalingFactor;
dimensions.targetHeight *= scalingFactor;
const offsetX = dimensions.pageWidth - dimensions.targetWidth;
const offsetY = (dimensions.pageHeight - dimensions.targetHeight) / 2;
return scaleAndTranslate(
0,
offsetY,
-translateX || offsetX,
offsetY,
scalingFactor
);
},
},

The calculateTargetScalingFactor method ensures the image is at least 25% larger than the page; however, the logic is not useful when the image is not full-bleed in the page. For example, a small image in the story page with pan- animation might be scaled to 2x while the expectation is not to scale.

Hope to provide an option such as animation-scale-disabled to disable the scaling.

/**
* Calculate target scaling factor so that it is at least 25% larger than the
* page.
* @param {StoryAnimationDimsDef} dimensions Dimensions of page and target.
* @return {number}
*/
export function calculateTargetScalingFactor(dimensions) {

/cc @newmuis

Alternatives Considered

Use other animation, or create a custom panning animation. Yet to resolve it, providing an option to disable the scaling would help the most.

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions