Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding Animation To Your Project
  • To add the Lottie Widget to your project:
  • Lottie Widget Properties
  • 1. Lottie Path:
  • 2. Animate
  • 3. Height & Width
  • 4. Frame Rate
  • 5. Animation Type
  • 6. Alignment
  • 7. Box-Fit
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Lottie Animation

PreviousHtmlViewNextLinear Progress Bar

Last updated 5 months ago

The Lottie animation widget is used to display animations on the screen.

The Lottie Animation widget lets you showcase in your Digia Studio app, whether they're from uploaded assets or a URL link.

Lottie files are top-notch—they don't lose quality like GIFs, they're compact, and they effortlessly integrate across platforms.

For instance, you can utilize the Lottie Animation widget to present a charmingly animated loading spinner, offering users a delightful experience while they wait.

Adding Animation To Your Project

To add the Lottie Widget to your project:

  1. Select the Lottie widget from the Add Widget Button or add it directly from the widget tree.

  2. For the Lottie Animation , select the Lottie Widget, and move to the Widget Properties (on the right side of your screen), and enter the Text you want.

Lottie Widget Properties

1. Lottie Path:

Locate the Path property and insert the URL for the new Lottie file.

2. Animate

By default, the animation starts playing as soon as the page loads. To change this and make the animation play only when you want, such as when clicking a button or another event, deselect the Animate checkbox.

3. Height & Width

The height and width attributes are used to specify the dimensions of the animated area, determining how much space the animation will occupy on the screen.

4. Frame Rate

Frame rate is the measurement of how quickly a number of frames appears within a second, which is why it's also called FPS (frames per second).

i.e Motion pictures, TV broadcasts, streaming video content, and even smartphones use the standard frame rate of 60fps.

5. Animation Type

  1. Once: The animation runs only once.

  2. Loop: The animation runs in loop or infinite times.

  3. Boomerang: The animation runs in to and fro motion.

6. Alignment

  1. None: Animation have no alignment.

  2. Top Left: Animation shifts toward top left position of the original page.

  3. Top Right: Animation shifts toward top right position of the original page.

  4. Top Center: Animation shifts toward top center position of the original page.

  5. Center Left: Animation shifts toward center left position of the original page.

  6. Center: Animation shifts toward center position of the original page.

  7. Center Right: Animation shifts toward center right position of the original page.

  8. Bottom Left: Animation shifts toward bottom left position of the original page.

  9. Bottom Right: Animation shifts toward bottom right position of the original page.

  10. Bottom Center: Animation shifts toward bottom center position of the original page.

7. Box-Fit

  1. None: It positions the child at the center of the parent by default and removes any parts of the child that extend beyond the parent's boundaries.

  2. Fill: The child completely occupies the parent's box, but this might cause the child's original shape to change.

  3. Contain: It adjusts its child to occupy as much space as it can within the parent widget's boundaries without going beyond them.

  4. Cover: It minimizes the child's size to fit within the parent widget's boundaries while ensuring that the child remains completely covered.

  5. Fit Height : It ensures that the child occupies the entire height of the parent, allowing the child to extend beyond the parent's boundaries horizontally, while still preserving its original shape.

  6. Fit Width: It ensures that the child occupies the entire width of the parent, allowing the child to extend beyond the parent's boundaries vertically, while still preserving its original shape.

  7. Scale Down: It overrides the property that we set or scale down the properties.

Lottie files