A small plugin for quickly applying the same animation too all child elements of a specified parent.
npm i --save nativescript-child-animations

Nativescript Child Animations

A small nativescript plugin that makes it easier to animate multiple child elements.


In your nativescript source directory, run:

tns plugin add nativescript-child-animations

This should add the child animations package to your package.json within your project ready for use.


This child animations package works by supplying a function with : a parent (container) view, an animation definition, a delay between animating each child view and optionally a 'reverse' boolean.

  1. Import NativescriptChildAnimations module in the component that you'd like to use it in:

    import { animateChildren } from 'nativescript-child-animations';
  2. Call the animateChildren() function with params:

    animateChildren(parentView, animationDef, 70);



<FlexBoxLayout flexDirection="column" id="parent">
<Label style="transform: translate(0, -800)" text="I'm First!"></Label>
<Label style="transform: translate(0, -800)" text="I'm Second!"></Label>
<Label style="transform: translate(0, -800)" text="I'm Third!"></Label>


import { animateChildren } from 'nativescript-child-animations';
import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
import { AnimationDefinition } from 'tns-core-modules/ui/animation/animation';
import { AnimationCurve } from 'tns-core-modules/ui/enums';

selector: 'Home',
templateUrl: './home.component.html'
export class HomeComponent implements OnInit {
parentView: FlexboxLayout | StackLayout;
animationDef: AnimationDefinition = {
translate: { x: 0, y: 0 },
duration: 1000,
curve: AnimationCurve.easeOut

constructor(private page: Page) {}

ngOnInit(): void {'navigatedTo', () => {
this.parentView ='parent');
animateChildren(this.parentView, this.animationDef, 70, true);