Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Animation attributes are not working in amp-story-page anymore (Only on 1st page of amp-story) #6372

Open
ozamanav opened this issue May 9, 2022 · 0 comments
Open

Animation attributes are not working in amp-story-page anymore (Only on 1st page of amp-story) #6372

ozamanav opened this issue May 9, 2022 · 0 comments
Labels
Status: Pending Triage Type: Bug

Comments

@ozamanav
Copy link

ozamanav commented May 9, 2022 •
edited
Loading

Below is the code we have used for testing

<html ⚡ lang="de">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <title>Hello Supprb</title>
    <link rel="canonical" href="https://app.cleverpush.com/hello-supprb" />
    <meta name="robots" content="index,follow,noarchive,max-snippet:-1,max-image-preview:large,max-video-preview:-1" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta property="og:url" content="https://app.cleverpush.com/hello-supprb" />
    <meta property="og:site_name" content="" />
    <meta property="og:locale" content="de_DE" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="Hello Supprb" />
    <meta name="amp-story-generator-name" content="CleverPush" />
    <meta name="amp-story-generator-version" content="1.0" />
    <style amp-boilerplate>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}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      .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
      }
    </style>
    <script type="application/ld+json">
      {
        "@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/"
        }
      }
    </script>
  </head>
  <body>
    <amp-story standalone title="Hello Supprb" publisher="" publisher-logo-src="" poster-portrait-src="">
      <amp-analytics>
        <script type="application/json">
          {
            "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"
              }
            }
          }
        </script>
      </amp-analytics>
      <amp-analytics type="gtag">
        <script type="application/json">
          {
            "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"]
                }
              }
            }
          }
        </script>
      </amp-analytics>
      <amp-story-page id="page-0" auto-advance-after="5s">
        <amp-story-grid-layer template="fill">
          <div class="s-3"><div class="s-2"><amp-img id="1" layout="responsive" width="9" height="16" src="https://static.cleverpush.com/notification/icon/9sT4iRQX425TecuGP.jpg" class="s-1 img-cover"></amp-img></div>
          </div>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="fill">
          <div class="s-3"><div class="s-2"><div id="2" class="s-5"><h1 id="KpCyC6dM" animate-in="fly-in-left" class="s-4">Hello<br>World<br></h1></div>
          </div>
          </div>
        </amp-story-grid-layer>
      </amp-story-page>
    </amp-story>
  </body>
</html>
@ozamanav ozamanav changed the title Animation attributes are not working in amp-story-page anymore Animation attributes are not working in amp-story-page anymore (Only on 1st page of amp-story) May 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Pending Triage Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ozamanav