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" }