Animating images

This module takes two images and fades one in on top of the other. This was originally designed for the Cincinnati's Girl Collector series, to dramatically display a series of illustrations.

The effect is assigned to a presto photo asset inside an In-Depth story. A related image on the CDN is assigned via the In-Depth config and is the first image displayed. After a delay, the main/presto image is faded in on top of the first one. This could be used to highlight a portion of an image or display a before/after.

The first image is, well, the first image readers will see. It's the "related", image from the CDN. The second image is the main image (from the story in presto). When the module scrolls into view, the animation begins.

Options

value purpose required default
storytellingComponent Use imageAnimation Yes
imageFirst The CDN link for the other image in the animation. This is the first image you will see, before the second image fades in. There is no imageSecond. That image — the final image — is the presto image. Yes
firstTransitionTime The length, in milliseconds (1000 = 1 second) of the first photo's fade in. 1500
secondTransitionTime The length, in milliseconds (1000 = 1 second) of the main photo's fade in. 1500
firstDelayTime The length, in milliseconds (1000 = 1 second) of the delay before the first photo fades in. 1500
secondDelayTime The length, in milliseconds (1000 = 1 second) of the delay before the second photo fades in after the first one becomes visible. 1500
firstAltText Alt text for the initial photo. Must be defined here. If none is defined, which is okay, the image will be hidden from screen readers.
secondAltText The alt text for the main image. Alt text defined in Presto (the caption)
caption If the presentation needs a caption, you can add it here. If none is configured, then the presto caption for the main image will be used.
credit The text for an optional image credit.
hideCaption As with regular images, if set to true, the caption will not be displayed. false
hideCredit As with regular images, if set to true, the credit will not be displayed. false
textAlign Which way should the text align? left, center or right left

Example configuration

{assets.34976389}
storytellingComponent: imageAnimation
position: center-well
imageFirst: https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/546889002/9f75bcb1-4fdf-4fb8-bbb3-e58508e017cf-test.jpg
firstTransitionTime:1500
secondTransitionTime: 1500
firstDelayTime: 0
secondDelayTime:1500
firstAltText: This is the first alt text from the config
secondAltText:  Second Alt Text
caption: This is a caption from the config
credit: Credit config
hideCaption: true
hideCredit: true
textAlign: right
{}

Analytics

Event Action Category Label

None

Published examples