ampproject / ampproject/amphtml

fly-in preset display issue

Open
#30,790 4 comments 0 reactions 1 assignee Claimed by @mszylkowski View on GitHub
P2: Soon Stale Type: Bug WG: stories
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

`fly-in` preset should start fully off screen.
Currently they're appearing in screen before transition start.
This is apparent in desktop mode when screen is higher than 1180px.

Preview link, when on page 5 this is visible on page 6
be sure to be in desktop mode with screen higher than 1180px:
https://webstoriesinteractivity-beta.web.app/animals-polls.html

This may be a problem with the distance is calculation.
When scaling the viewport the element comes in and out.

The offsetY calculation may be the culprit. It might need to be a responsive value in desktop mode.
https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/1.0/animation-presets.js#L145-L152

All other `fly-in` presets might need to be double checked also.

Example of element in view, it should be off screen:
Screen Shot 2020-10-21 at 12 46 23 PM

Element is coming in and out in top right of next page when scaling window:
![Oct-21-2020 12-47-15-2](https://user-images.githubusercontent.com/3860311/96751774-98d6ba80-139b-11eb-8e2f-5969e2863b1f.gif)

cc @ampproject/wg-stories @hongcatlover

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.