Article

Adding a Scene to a Chapter or a Section Header

Add a scene to your article to create special effects.

Overview

Apple News Format provides animations (see About Component Animations) and behaviors (see About Component Behaviors) to use with individual components in your article, but you can also use a scene—a combination of animations and behaviors—to control how a section or chapter of your article comes into view.

A scene combines animations and behaviors to create special effects that you can use with the headers in section and chapter components. Apple News Format has two scenes you can use to add interest to your article:

  • FadingStickyHeader. Causes the header to briefly "stick" to the top of the screen and then fade to a defined color.

  • ParallaxScaleHeader. Causes the header to zoom out and scroll more slowly than the user is scrolling, giving the impression of a parallax effect.

To add a scene, do the following:

  1. In the components array of your Section or Chapter, add a Header.

  2. In the scene property of the section or chapter component, specify which scene you want to use (fading_sticky_header or parallax_scale). See the example code in FadingStickyHeader.

Topics

Scene Types

object Scene

A combination of animations and behaviors to use in sections and chapters that have headers.

object FadingStickyHeader

The scene that briefly keeps a header at the top of the screen as the user scrolls through the article.

object ParallaxScaleHeader

The scene that gives the impression of a parallax effect by zooming out and scrolling slightly more slowly than the user’s action.

See Also

Article Structure

Nesting Components in an Article

Use container components to create the component hierarchies you need for special article designs.

Creating an Article Link

Link to an article by using the article-linking container component.

Displaying Components Side By Side

Configure a side-by-side, horizontal arrangement of components for your article.

object Header

The component for defining the top area of an article, chapter, or section.

object Container

Properties shared by all container types.

object Section

The component for organizing an article into sections.

object Chapter

The component for organizing an article into chapters.

object Aside

The component for setting apart content that is not directly related to the article, such as promotional content.

object CollectionDisplay

An object used in any container component type to define how the collection of child components is presented.

object HorizontalStackDisplay

The object for displaying components side by side in a Container component.

object FlexibleSpacer

The component for redistributing empty space inside a horizontal stack collection.

object Divider

The component for defining a horizontal line to visually divide parts of your article.

object ArticleLink

The container component for creating a link to an article.

object ArticleTitle

The component for displaying an article title in the ArticleLink component.

object ArticleThumbnail

The component for displaying a thumbnail image with an article link.