0

First time poster, long-time reader!

I am writing the JSON for an Apple News story. I have three consecutive full-screen fill images. They are all set to "attachment":"fixed". The transition from one image to another, when scrolling, is to reveal the next image continuously. I would like the "incoming" image to replace the prior image wholesale -- it just appears after someone scrolls to the bottom of the prior image. Hoping that makes sense, since I can't show the actual Apple News preview. I don't want to use an animation, since that only appears once; I want the same behavior when people scroll backwards.

Here's what I have now ... and the scrolling reveal IS what I expected. I want the very different behavior detailed above!

  "components": [
    {
      "role": "header",
      "style": "leadVideoStyle",
       "layout": {
          "ignoreDocumentMargin": true,
          "minimumHeight": "125vh"
        },

      "components": [
        {
          "role": "container",
          "anchor": {
            "targetAnchorPosition": "top"
          },
            "style": "scrimBackgroundStyle",
            "layout": {
            "ignoreDocumentMargin": true
          },

          "components": [
            {
              "role": "title",
              "layout": "titleLayout",
              "text": "some text",
              "textStyle": "titleStyle",
              "format": "html"
            },
            {
              "role": "intro",
              "layout": "introLayout",
              "text": "some text,
              "textStyle": "introStyle"
            }
          ]
        }
      ]
    },
    {
      "role": "section",
      "layout": {
          "ignoreDocumentMargin": true,
          "minimumHeight": "200vh"
        },      
      "style": "leadPhotoStyle1"
    },
    {
      "role": "section",
      "layout": {
          "ignoreDocumentMargin": true,
          "minimumHeight": "200vh"
        },      
      "style": "leadPhotoStyle2"
    }
  ],


"leadVideoStyle": { "fill": { "type": "video", "URL": "URL here", "stillURL": "bundle URL", "fillMode": "cover", "verticalAlignment": "top", "attachment": "fixed" } }, "leadPhotoStyle1": { "fill": { "type": "image", "URL": "URL here", "fillMode": "cover", "verticalAlignment": "top", "attachment": "fixed" } }, "leadPhotoStyle2": { "fill": { "type": "image", "URL": "URL here", "fillMode": "cover", "verticalAlignment": "top", "attachment": "fixed" }

0 Answers0