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
Description
The amp-story animation preset scales the pan effect image. For example,
pan-righteffect:amphtml/extensions/amp-story/1.0/animation-presets.js
Lines 304 to 325 in 8c34f2d
The
calculateTargetScalingFactormethod 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-disabledto disable the scaling.amphtml/extensions/amp-story/1.0/animation-presets-utils.js
Lines 76 to 82 in 8c34f2d
/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