Container Components

The most fundamental component for building an interface in After Effects, Containers support layout, style, some touch handling, and accessibility controls.

The Container component maps directly to the ViewRef equivalent in React Native JSX.

Containers are designed to be nested inside other views and can have zero to many children of any type.

Container component options in the You.i Properties Panel

Regular Container

The default component type in After Effects.

Options

Markers

Option Description
FocusIn The animation played when a view receives focus. Note: CYISceneView and ViewRef are set to be focusable. By default, CYISceneView and ViewRef are not focusable, so by default, these timelines are not used.
FocusOut The animation played when a view loses focus. If not defined, the reverse of FocusIn is used. Note: CYISceneView and ViewRef are set to be focusable. By default, CYISceneView and ViewRef are not focusable, so by default, these timelines are not used.
In Multi-purpose: 1) The animation played when a view is a list item that is inserted in the list. 2) The animation played when a view is part of a CYIStackView, and the view is brought to front.
Out Multi-purpose: 1) The animation played when a view is a list item that is removed from the list. 2) The animation played when a view is part of a CYIStackView, and the view is removed from the front.

Marker Comment

Option Description
recursive If present and set to true on a marker, timelines created from this marker are recursive, meaning they become timeline groups that contains all other timelines of the same name. Defaults to false.
stop-recursion If present and set to true on a marker, timeline groups of parent views do not include this view’s timelines. Defaults to false.
loop If present and set to true on a marker, indicates that timelines created from this marker loop infinitely when played. Timeline groups may loop, but the loop option is ignored on child timelines within a timeline group. Defaults to false.
tracks If present, this marker indicates how timelines should be created for a given marker. Can be keyframes, which indicates that only tracks with keyframes are used, or all, which indicates that all tracks should be used. Defaults to keyframes.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off

Scrolling View Container

Allows users to scroll and pan through content inside. Can be thought of as a window through which items are viewed. The extent by which the window can be scrolled is the “scrolling area”. When using a touch or cursor interface, users can scroll across the content by pressing and holding on the content and moving the cursor in the opposite direction they want to scroll. When using focus to navigate within the scrolling area, the scrolling view will scroll until the item is completely visible or, if the item is larger than the scrolling view, until its top or left edge is aligned with the top or left edge of the scrolling view.

Requirements

Class CYIScrollingView
Component Type container
Component Sub-Type scrolling
Example componentSubtype:scrolling; class:CYIScrollingView;

Options

Option Description
Move A timeline that is seeked through as the child moves across the scrolling view’s visible region. See Move Timelines for details.
MoveHorizontal A timeline that is seeked through as the child moves horizontally across the scrolling view’s visible region. See Move Timelines for details.
MoveVertical A timeline that is seeked through as the child moves vertically across the scrolling view’s visible region. See Move Timelines for details.
CascadeIn A timeline used to generate an “in” cascade timeline group. See Cascade Timelines for details.
CascadeOut A timeline used to generate an “out” cascade timeline group. See Cascade Timelines for details.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off
Scroll Specifies whether the list scrolls, and what direction the list scrolls, or if it scrolls in both. Do Not Scroll Scroll Horizontally Scroll Vertically Scroll In Both Directions
Overpull Specifies how much overpull is displayed when the list exhibits an overpull behavior. A float value, for example: 1.0
Horizontal Magnets Sets the placement of the horizontal magnets (right and left), at the beginning and end of the list, in the center, only at the beginning, and only at the end. An offset can also be specified so the list magnet can be placed away from its specified position. Note: Edges is not supported in You.i React Native. None Edges Center Begin End
Vertical Magnets Sets the placement of the vertical magnets (top and bottom), at the beginning and end of the list, in the center, only at the beginning, and only at the end. An offset can also be specified so the list magnet can be placed away from its specified position. Note: Edges is not supported in You.i React Native. None Edges Center Begin End
Carousel Sets how the list will carousel or loop when the last or first item in the list is scrolled beyond the applicable list length. Can be set for both the horizontal direction and vertical direction or independently. Never Carousel Always Carousel Carousel If Overflowing
Scrolling Area Layout Mode Sets the size of the scrolling area based of the content or the containing view, and it is important to note that this is different than the size of the container composition. By default this will use the “Fit Content if Overflowing” which means the scrolling area will be set to the size of the content even if it is outside the container comp. This can also be set to Fit Content, which is similar to the default, but will also be applied elements in the scrolling container if they are smaller than the size of the composition. “Fill View” will set the scrolling area size to size of the composition. Generally the default is the best option. Fit Content Fit Content If Overflowing Fill View
Animation Sets the delay between the CascadeIn and CascadeOut animation timelines for each list item. An integer value, for example: 50

Radio Group Container

A view that contains toggle button children, ensuring only one of them is ON at any given time.

Requirements

Class CYIRadioGroupView
Component Type container
Component Sub-Type radiogroup
Example componentSubtype:radiogroup; class:CYIRadioGroupView;

Options

None.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off

Drawer Container

Can be placed around the edges of a view, making it possible for the user to swipe to open and close.

Requirements

Class CYIDrawerView
Component Type container
Component Sub-Type drawer
Example componentSubtype:drawer; class:CYIDrawerView;

Options

None.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off

Stack Container

Displays one of its child views at a time.

If In and Out timelines are set for the child views, they will be animated in and out as the active view changes. If timelines are not used, the child views are simply hidden or shown.

Requirements

Class CYIStackView
Component Type container
Component Sub-Type stack
Example componentSubtype:stack; class:CYIStackView;

Options

None.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off

Decorated Container

Adds a background and border to the content. Supports clipping the content to the area defined by the border.

Requirements

Class CYIDecoratedView
Component Type container
Component Sub-Type decorated
Example componentSubtype:decorated; class:CYIDecoratedView;

Options

None.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off
Background Sets the background color of a decorated view container. Transparent by default. The RGB and RGBA values must be prefixed by the # symbol. Example: #FF000099 or #FF0000. A string value, for example, #RRGGBBAA or #RRGGBB
Border Thickness Sets a stroke thickness for a border around the decorated view container; 0 by default A float value, for example, 1.0
Border Color Sets a color for the border around the decorated view container. The RGB and RGBA values have to be prefixed by a # symbol. Has no effect if the border thickness is 0. Example: #FF000099 or #FF0000. A string value, for example, #RRGGBBAA or #RRGGBB
Corner Radius Sets the corner radius for the corners of the decorated view container. This can be set independently or for all corners. A float value, for example, 1.0
Overflow Allows the layers overflow to be displayed or masked so you will not see the overflow outside of the bounds of the composition. Visible Hidden