Touchify Help Center
Animations

Introduction

Learn how to easily animate your content using Studio tools.

Element Animation

To animate an element, select it then click the "Animation" button (bounce icon) in the right sidebar. The panel will open on the animations list: select the one you want to apply to the element then modify its settings (duration, speed curve...) in the new Element animations panel.

Caution: you can apply multiple animations to the same element, but some conflicts may appear if the animations trigger at the same time. Offset their timer(clock icon) to avoid display bugs.

Animation Type

Animations are separated into four families. Each corresponds to a type of use described below.

The Opacity animation has been chosen to illustrate this article; you can choose other animations in your project.

Entrance

These animations are designed for the appearance of elements, when the page opens.

Demonstration of Entrance type animation

Exit

In parallel with the "Entrance" section, this list concerns exit animations.

Demonstration of Exit type animation

Transform

These animations modify the position, size or transparency of the element over the long term.

Demonstration of Transform type animation

Call to Action

These animations are designed as loops, so they can be repeated to attract the user's attention.

Demonstration of Call to Action type animation

Page Transitions

Apply page animations to smooth navigation.

Click the "Page transitions" button (page/bounce icon) in the right sidebar. Choose the animations of your choice: page entrance and exit are independent.

Since the panels are already classified by animation type, you will not find the four families offered for element animations.

Page transitions

Windows

Learn how to create contextual windows with Touchify Studio.

Customization

Learn how to adjust your animation settings.