Skip to main content
Version: v11.7.2

Apply Animations


Add animations to a widget using an Animate method. WaveMaker platform uses the react-native-animatable library to enable the Animate method, and react-native-animatable is similar to CSS animation. However, animation should be written in JavaScript.

In the following documentation, learn how to define animations in React Native projects.

How to Animate

The Animate method is available for all WaveMaker Widgets. In the following example, see the reference for a WaveMaker widget, which invokes the Animate method.

Page.Widgets.container1.animate({
animation: {
0 : {
opacity: 0
},
0.5: {
opacity: 1
}
1: {
opacity: 0
}
},
iterationCount: 'infinite'
});

Properties to Pass to Animate method

note

Other properties will be passed down to the underlying component.

PropDescriptionDefault
animationThis is the animation definition. Similar to @Keyframes in CSS.None
durationFor how long the animation will run (milliseconds).1000
delayOptionally delay animation (milliseconds).0
directionDirection of animation, especially useful for repeating animations. Valid values: normal, reverse, alternate, alternate-reverse.normal
easingTiming function for the animation. Valid values: custom function or linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back.ease
iterationCountHow many times to run the animation, use infinite for looped animations.1
iterationDelayFor how long to pause between animation iterations (milliseconds).0
transitionWhat style property to transition, for example opacity, rotate or fontSize. Use array for multiple properties.None
onAnimationBeginA function that is called when the animation has been started.None
onAnimationEndA function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not.None
onTransitionBeginA function that is called when the transition of a style has been started. The function is called with a property argument to differentiate between styles.None
onTransitionEndA function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a property argument to differentiate between styles.None
useNativeDriverWhether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling.false
isInteractionWhether or not this animation creates an "interaction handle" on the InteractionManager.false if iterationCount is less than or equal to one

Example

In this example, a toggle is going to be created using containers. Using this toggle, background of the page content can be changed. First create a new page.

Markup

<wm-page name="page1">
<wm-mobile-navbar name="mobile_navbar1" title="Animation">
<wm-anchor name="play" iconclass="wm-sl-r sl-button-play" class="navbarAnchorItem" caption="" on-tap="playTap($event, widget)"></wm-anchor>
</wm-mobile-navbar>
<wm-content name="content1">
<wm-page-content columnwidth="12" name="page_content1" class="day">
<wm-linearlayout direction="column" spacing="4" padding="4px" name="linearlayout1" height="100%">
<wm-linearlayoutitem flexgrow="1" name="linearlayoutitem1"></wm-linearlayoutitem>
<wm-linearlayoutitem name="linearlayoutitem2" flexgrow="0" horizontalalign="center">
<!-- Outer container of toggle -->
<wm-container name="indicator" width="144px" class="toggle-container" on-tap="indicatorTap($event, widget)">
<!-- Handle of toggle -->
<wm-container width="48px" height="48px" name="toggleHandle" class="toggle-handle" on-tap="toggleHandleTap($event, widget)"></wm-container>
</wm-container>
</wm-linearlayoutitem>
</wm-linearlayout>
</wm-page-content>
</wm-content>
</wm-page>

Script

Page.light = false;
Page.onReady = function() {
toggleLight();
};

function toggleLight(flag) {
return Promise.resolve().then(function() {
if (Page.light) {
moveToggleToRight();
} else {
moveToggleToLeft();
}
}).then(function() {
Page.light = !Page.light;
Page.Widgets.page_content1.classname = Page.light ? 'day' : 'night';
Page.Widgets.indicator.classname = 'toggle-container ' + (!Page.light ? 'day' : 'night');
})
}

function moveToggleToRight() {
return new Promise(function(resolve) {
Page.Widgets.toggleHandle.animate({
animation: {
0: {
left: 0,
},
1: {
left: 90
}
},
onAnimationEnd: resolve
});
});
}

function moveToggleToLeft() {
return new Promise(function(resolve) {
Page.Widgets.toggleHandle.animate({
animation: {
0: {
left: 90,
},
1: {
left: 0
}
},
onAnimationEnd: resolve
});
});
}
Page.toggleHandleTap = function($event, widget) {
toggleLight();
};
Page.indicatorTap = function($event, widget) {
toggleLight();
};

Styles

.day .app-container,
.day .app-page-content {
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.night .app-container,
.night .app-page-content {
background-image: linear-gradient(120deg, #2e2d2a 0%, #686868 100%);
}
.toggle-container .app-container,
.toggle-handle .app-container {
border-radius: 48px;
}
.toggle-container .app-container {
border:4px solid #fff;
}
.toggle-handle .app-container {
background-color: #fff;
}

Preview

Preview the app and tap on toggle to change the page background.

React Native Animations