Developer Portal
Quick StartsComposition scriptingAPIs and SDKsSupport
  • Portal overview
  • Quick start
  • REST API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Get a control app's API token
      • Get a composition's sub-composition IDs and names and their payload structures
      • Get a control app's model
      • Get a control app's metadata
      • Update a sub-composition's content
      • Update a sub-composition's animation state
      • Update a sub-composition's content and animation state in one call
      • Update multiple sub-compositions in one call
    • API reference
      • Get control app details
        • Get a control app's metadata
        • Get a control app's model
        • Get a control app's control data
      • Send data to a control app
        • Update a control app's content
        • Update a control app's animation state
      • Take out all of an app's output
  • Data stream API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Create a data stream
      • Link a data stream to a composition
      • Send data to an app using the data stream API
    • API reference
  • Composition scripting
    • Introduction
    • Overview
    • Quick start
      • Find sub-compositions and widgets
      • Read and update control nodes
      • Set text widget text properties
      • Read and update widget properties
      • Read control nodes and update widget properties
      • Set image widget URL property
      • Set table widget content property
    • Cheat sheets
      • Fundamentals
      • Interactive overlays
      • Best practices
    • Use cases
      • Read control nodes and generate HTML text
      • Read control nodes, generate HTML text with background
      • Text Ticker - Start ticker on "In" animation
    • Composition script editor reference
  • Software development kits
    • Graphics SDK
      • Getting started
      • Reference
        • SDK functions
        • Composition object
        • Sequencer object
      • Guides and examples
        • Load a composition with its token
        • Load a composition with its URL
        • Get the composition URL of an app instance
        • Sequencer VOD example
        • Control local preview of app
        • Load app instance output
    • Overlay SDK
      • Getting started
      • SDK functions
      • Use case examples
    • Widget SDK
      • Preparing your environment
      • Getting started
      • Reference
        • Widget UI definition
        • Widget callback functions
        • Time control object
        • Composition instance
      • Guides and examples
        • Widget example: CSS patterns
    • App SDK
  • Singular Basics
    • Overview of Singular
    • Managing overlays in the Dashboard
      • How to create a new composition
      • How to open a new app template
      • How to create an app for a composition
      • How to extract a composition from an app
      • How to find an app's shared app token and shared API URL
      • Dashboard reference
    • Building overlays in Composer
      • How to build a composition
      • How to set up layer logic to automate overlay transitions
      • How to set up control nodes to make widget properties available to a control app
      • Animating overlays
        • How to create timeline animations
        • How to create behavior animations
        • How to create update animations
      • How to make overlays interactive
      • How to adapt overlays to various screen sizes
      • Composer reference
    • Controlling overlays in Studio and UNO
      • How to use Studio
      • Studio reference
      • UNO reference
  • Support
    • Singular status
    • Support resources
    • Singular terminology
    • Performance Testing
Powered by GitBook
On this page
  • How to change the timing of animations
  • How to create independent In and Out animations
  • How to change animation settings
  • How to use the link timelines feature to run timeline animations in nested sub-compositions

Was this helpful?

  1. Singular Basics
  2. Building overlays in Composer
  3. Animating overlays

How to create timeline animations

PreviousAnimating overlaysNextHow to create behavior animations

Last updated 2 years ago

Was this helpful?

Timeline animations control the speed, duration, and style of how sub-compositions, groups, and widgets animate In and Out.

This guide shows you how to:

How to change the timing of animations

Timeline animations are represented by colored bars in the animation menu tab in the property panel. To change them

  1. Navigate to the animation tab in the property panel.

  2. Click, hold, and drag the bar left and right to change when the animation starts. Or click hold and drag either end of the bar to shorten or lengthen the duration of an animation.

How to create independent In and Out animations

To set up animations so they animate In differently than they animate Out

  1. Navigate to the animation tab in the property panel.

  2. Activate 2 timelines in the top of the animation tab.

  3. Select Out1 to In to configure the In animation and In to Out2 to configure the Out animation.

If you want an overlay to animate In and Out in the same way, don't use this feature.

How to change animation settings

To fine-tune animation settings

  1. Navigate to the animation tab in the property panel.

  2. Click the three sliders icon on the timeline animation bar. You can change the type, direction, duration, and curve of animations.

  3. Test your changes by clicking In and Out below the output window.

The Singular REST API and control applications can only control timeline animations that have been set to the root level of your composition tree structure. If you need timeline animations to play out in nested sub-compositions, use the link timelines feature.

How to use the link timelines feature to run timeline animations in nested sub-compositions

You can force the Singular REST API and control apps to run the timeline animations of nested sub-compositions by linking timelines.

To play the animation timelines of a sub-composition nested beneath another sub-composition, right click the nested sub-composition in the composition tree and select Link Timeline.

When a timeline animation has been linked, it will turn green in the composition tree.

You can also show or hide sub-compositions with linked timelines by toggling the linked timelines button (chainlink icon) in the top left of the composition navigator.

Change the timing of animations
Create independent In and Out animations
Change animation settings
How to use the Link Timelines feature to run timeline animations in nested sub-compositions
Changing animation timing
Enabling two animation timelines
Adjusting timeline animation settings
Choosing Link Timeline from the composition tree menu
The linked timelines button in the composition navigator