-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Description
Description
The amp-story animation preset scales the pan effect image. For example, pan-right effect:
amphtml/extensions/amp-story/1.0/animation-presets.js
Lines 304 to 325 in 8c34f2d
| '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.
amphtml/extensions/amp-story/1.0/animation-presets-utils.js
Lines 76 to 82 in 8c34f2d
| /** | |
| * 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