ampproject / ampproject/amp.dev
Animation attributes are not working in amp-story-page anymore (Only on 1st page of amp-story)
- Dominant language
- HTML
- Stars
- 600
- Forks
- 675
- PR merge metrics
- No merged PRs in 30d
Description
Below is the code we have used for testing
```
Hello Supprb
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
.img-cover img {
object-fit: cover
}
html {
overflow: hidden;
height: 100%;
}
svg.shape-element {
width: 100%;
}
.s-1 {
display: flex;
flex: 1;
background-color: #ffffff;
grid-gap: 0
}
.s-2 {
display: flex;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: absolute;
grid-gap: 0
}
.s-3 {
display: flex;
grid-gap: 0
}
.s-4 {
font-family: sans-serif;
position: absolute;
font-weight: bold;
font-size: 1.375em;
top: 55.5149%;
left: 24.4601%;
width: 51.1236%;
height: 11.2985%;
line-height: 1.2;
text-align: center;
color: rgb(255, 255, 255);
grid-gap: 0
}
.s-5 {
display: flex;
flex: 1;
grid-gap: 0
}
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://app.cleverpush.com/hello-supprb"
},
"headline": "Hello Supprb",
"datePublished": "2022-05-06T13:41:51.530Z",
"dateModified": "2022-05-06T13:41:51.530Z",
"author": {
"@type": "Organization",
"name": "",
"url": "https://app.cleverpush.com/"
},
"publisher": {
"@type": "Organization",
"name": "",
"logo": {
"@type": "ImageObject"
},
"url": "https://app.cleverpush.com/"
}
}
{
"requests": {
"page-visible": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/page-visible?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&",
"last-page-visible": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/last-page-visible?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&",
"open": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/open?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&",
"close": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/close?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&",
"page-atachment-enter": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/page-attachment-enter?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&",
"page-atachment-exit": "http://localhost:4000/story-analytics/kK7qFYzCpkJSB36iA/page-attachment-exit?page=${storyPageIndex}&referrer=DOCUMENT_REFERRER&userAgent=USER_AGENT&"
},
"triggers": {
"storyProgress": {
"on": "story-page-visible",
"request": "page-visible"
},
"storyEnd": {
"on": "story-last-page-visible",
"request": "last-page-visible"
},
"storyOpen": {
"on": "story-open",
"request": "open",
"tagName": "amp-story-page-attachment"
},
"storyClose": {
"on": "story-close",
"request": "close"
},
"storyAttachmentEnter": {
"on": "story-page-attachment-enter",
"request": "page-attachment-enter"
},
"storyAttachmentExit": {
"on": "story-page-attachment-exit",
"request": "page-attachment-exit"
}
}
}
{
"vars": {
"gtag_id": "2wmqkdmi23k",
"config": {
"2wmqkdmi23k": {
"groups": "default"
}
}
},
"triggers": {
"storyProgress": {
"on": "story-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_progress",
"event_label": "${title}",
"event_category": "web-story",
"extraUrlParams": {
"cd38": "${storyPageId}"
},
"send_to": ["2wmqkdmi23k"]
}
},
"storyEnd": {
"on": "story-last-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_complete",
"event_label": "${title}",
"event_category": "web-story",
"send_to": ["2wmqkdmi23k"]
}
},
"trackAnchorClicks": {
"on": "click",
"selector": "amp-story-cta-layer a",
"request": "click",
"vars": {
"event_name": "custom",
"event_action": "cta_click",
"event_label": "${title}",
"event_category": "web-story",
"send_to": ["2wmqkdmi23k"]
}
}
}
}
Hello
World
```
Contributor guide
Assessment
This issue has not been assessed yet.