Contents

Adding Animations

Use animations to affect how parts of your article come into view the first time they appear.

Overview

On this page, you’ll learn how to apply animations to components.

The images below display some animations. In the first image, the pull quote gets larger and darker as the user scrolls through the text. In the second image, the photo gets darker, but not larger, as the user scrolls. In the third image, the gallery moves in from the right side of the screen.

[Image]

[Image]

[Image]

Create Animations

  1. Copy the example code Scale Fade Animation: Copy This Code.

  2. Paste the code inside the pullquote component in your article.json file, after the closing quotation mark that ends the text property.

  3. Copy the example code Move-In Animation: Copy This Code.

  4. Paste the code inside the gallery component in your article.json file, after the comma that ends the layout property.

  5. Copy the example code Fade-In Animation: Copy This Code.

  6. Paste the code inside the photo component in your article.json file, after the closing quotation mark that ends the caption property.

Your code should look like the example code Animations: Result.

After you make these changes in your code, you can preview your working article.json file in News Preview to see the animations.

Scale Fade Animation: Copy This Code

,
              "animation": {
                "type": "scale_fade",
                "userControllable": true,
                "initialAlpha": 0.5,
                "initialScale": 0.75
              }

Move-In Animation: Copy This Code

          "animation": {
            "type": "move_in",
            "preferredStartingPosition": "right"
          },

Fade-In Animation: Copy This Code

,
              "animation": {
                "type": "fade_in",
                "userControllable": true,
                "initialAlpha": 0.5
              }

Animations: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "section",
      ...
      "components": [
        ...
        {
          "role": "container",
          ...
          "components": [
            {
              "role": "pullquote",
              "format": "html",
              "layout": "halfMarginAboveQuarterBelowContainedLayout",
              "text": "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS <span data-anf-textstyle='mediumGrayText'>QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”</span>",
              "animation": {
                "type": "scale_fade",
                "userControllable": true,
                "initialAlpha": 0.5,
                "initialScale": 0.75
              }
            },
            ...
          ]
        },
        ...
        {
          "role": "gallery",
          "layout": "noMarginLayout",
          "animation": {
            "type": "move_in",
            "preferredStartingPosition": "right"
          },
          "items": [
            ...
          ]
        },
        ...
        {
          "role": "container",
          ...
          "components": [
            {
              "role": "photo",
              "layout": "halfMarginAboveContainedLayout",
              "URL": "bundle://sidebar.jpg",
              "caption": "A caption for the sidebar photo.",
              "animation": {
                "type": "fade_in",
                "userControllable": true,
                "initialAlpha": 0.5
              }
            },
            ...
          ]
        },
        ...
      ]
    }
  ],
  ...
}

Previous

Adding Color to Text Ranges

Next

Adding a Scene

See Also

Related Documentation

Advanced Design Tutorial 2: Layout and Positioning