Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Animate parts of a page

Animate parts of a page

In this article we'll walk through how you can easily add animations to your pages with some custom CSS. 

loading-animation'.gif

Adding Animations

To add animations to your page, you can use external animation libraries. For instance, for the purpose of this article we'll use a particular library from animate.css, however there are dozens of animation libraries out there for you to choose from. We'll just cover the basics for this article, however feel free to check out the documentation portals for animate.css or any other library for their extensive animation options. 

Add Library

Start by adding the CSS library to the header section of your app located under Settings > Custom Header/Footer Code > Custom Header Code.

Copy the following code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

And paste it into the Custom Header Code section of your app: 

 

Apply Animation

Next, open the edit option for the row, column or component to apply the animation to:

Add the following to the "Additional Class Names": animate__animated animate__rollIn

Each element that must be animated must first have the 'animate__animated' class and then a space with the animation type. 

Some example animations you can choose from: 

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight
    See this page for full list of animations. 

As you can see below, we applied the animate_rollIn to the component id which will load the page and apply that animation: 

loading-animation'.gif

How did we do ?

Previous Article
Customizing your app shortcut for mobile phones
Next Section
Design Customization
Article Navigation
  • Adding Animations
  • Add Library
  • Apply Animation
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational