Questions tagged [lottie]

Questions regarding Airbnb's Lottie, a library for rendering After Effects animations in real-time. Use this tag for questions regarding implementations using the Android, iOS, or React-based branches of Lottie.

Filter by
Sorted by
Tagged with
0 votes
0 answers
24 views

BottomNavigationBar - Flutter - Unselected items wrongly animated

I am using a BottomNavigationBar with Lottie animations, I set an animation for each navigation item with activeIcon and icon parameters. When I click on a navigation item, it animates correctly ...
  • 306
1 vote
0 answers
15 views

react-native-lottie-splash-screen error - Use of undeclared identifier 'Dynamic'

I am trying to integrate react-native-lottie-splash-screen lib into my code but i am getting this error after creating dynamic swift file: enter image description here I tried a lot things, but its ...
0 votes
1 answer
18 views

Lottie Player Reverse Direction not working without loop

I have a Lottie animation and I want to play it in the reverse direction. I do not want the animation to loop, it should just play once (in a reverse direction) and stop. I have tried using ...
1 vote
1 answer
18 views

Change preserveaspectratio attribute of SVG inside Lottie player

I have embeded a lottie json file using lottie player. I do not have access to SVG file. I only have json file. I want to change preserveaspectratio attribute of SVG to xMinYMax meet instead of ...
  • 1,450
0 votes
2 answers
51 views

How to show and hide a success animation in Flutter?

Currently, I'm coding a math game with random questions that the user may input the correct answer. I want to display a short Lottie (0.5 seconds) when the user insert the answer correctly. It must ...
0 votes
1 answer
18 views

Error while deploying REACT App on Vercel "npm ERR! While resolving: react-lottie@1.2.3"

I get an error while deploying my REACT App on Vercel, Netlify etc. It seems it is related to lottiefiles. Does it mean I cannot use lottiefiles in my React App? Refer to the screenshot for details. ...
0 votes
1 answer
39 views

Lottie Stack Overflow

I am programming a live stream function and the button is animated with lottie. I can't find anything wrong on the application but crashlytics shows this. Fatal Exception: java.lang.StackOverflowError:...
0 votes
1 answer
59 views

Xamarin Lottie Animation Ios bug

Description I am working in a company where the marketing team are creating animation files via Adobe and exporting them as lottie json files for my application. Problem Most of the animation are ...
0 votes
1 answer
53 views

How add lottie animation on background streamlit app?

I have streamlit app and i need add lottie amination on this background. Animation - it is json file on my page. Some code for open json file as lottie images: import streamlit as st from ...
0 votes
1 answer
28 views

Play animation backwards

I added click event on my AnimationView and I'm trying to play the animation with the first click and play the animation backwards with the second one. Which would be the best way to achieve it? Com....
  • 75
1 vote
0 answers
18 views

How do you add multiple fadeIn texts using with Reanimated 2?

Im trying to add a multiple lines of texts with different time delayes to fade in. Im new to Reanimated and React Native and made a splash screen which seems like working well, but when the animation ...
  • 57
0 votes
0 answers
60 views

How to draw WinRT::Windows::UI::Composition::Visual on bitmap

I am trying to draw cppwinrt Lottie animation into my Direct2D app, but can't understand how to do this... It's possible draw this animation (WinRT::Windows::UI::Composition::Visual) and get data ...
  • 13
0 votes
0 answers
25 views

How to put a white background when converting tgs to gif?

I wrote a program to convert a .tgs file to .webm, but the video always turns out on a black background. import os import logging from lottie.parsers.tgs import parse_tgs_json from lottie.exporters....
0 votes
1 answer
23 views

lottie animation gets recomposed when i scroll which is inside the lazyColumn

I am creating a stack animation that contains a list of animations. The animation is inside a LazyColumn, and when I scroll, the LazyColumn gets recomposed. However, the Lottie animation also gets ...
  • 1
0 votes
0 answers
47 views

How to convert Lottie json file to mp4 in Android app at runtime

I have a question regarding Lottie files. I have a template in .json file and I want to convert that .json animation into mp4. How can I do this at runtime in Android apps?
  • 158
0 votes
0 answers
18 views

How to save lottie cache with AnimationCacheProvider in swift

i would like to know how to save lottie cache in swift. Lottie provide a cache class called AnimationCacheProvider, but i dont know how to use it. i try to find some tutorial for storing lottie cached ...
0 votes
0 answers
47 views

Lottie animation not showing for Xamarin iOS app

I tried implementing Lottie animation in iOS app. It works fine in Android but not iOS. Just blank. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://...
  • 372
0 votes
0 answers
32 views

Combining multiple Play and Pause buttons with Multiple Lottie Animations

I am building a webpage that has three Lottie animations on it and I want to add "Play" and "Pause" buttons to each animation - one set of buttons per animation. I stumbled upon ...
0 votes
0 answers
19 views

Lottie animation conflict - Bodymovin animation stops working once I include Lottie Player library as well

I made animation in After FX using bodymovin that works fine if I only use bodymovin library, but if I include Lottie player library (that I need for other animations) it stops working so I guess ...
  • 416
0 votes
1 answer
27 views

LottieCompressor Library

I am trying to use lottie-compress to compress a lottie asset. I am using node v18.13.0 and have specified type module in the package.json. I am getting the following error trying to run the code ...
  • 567
0 votes
1 answer
48 views

How to play lottie animation half?

Help me! I want mute and unmute button with Lottie animation. But this mute.json json animation have both. So I need one click play Lottie half animation like this. When clicked and @override ...
  • 89
1 vote
1 answer
81 views

GSAP multiple scroll triggers for lottie animations in different sections

I am trying to setup multiple gsap scroll triggers with lottie animations in 3 sections. I would like the screen to pin to the animations until they complete. This is the code I currently have, which ...
  • 11
1 vote
1 answer
52 views

Why does lottie throw ImportError: cannot import name 'PngRenderer' from 'lottie.exporters.cairo'?

Why does lottie give the error ImportError: cannot import name 'PngRenderer' from 'lottie.exporters.cairo'? import lottie from lottie.exporters.gif import export_gif from lottie.parsers.tgs import ...
0 votes
0 answers
33 views

How to Port Telegram Sticker Animation .tgs into flutter?

Telegram has a moving sticker animation using the tgs extension, how to make it work for displaying in a flutter project? I want the telegram animation sticker to be realized on the flutter widget
0 votes
0 answers
90 views

Animate lottie on scroll with fixed position in container, until lottie is finished, then relative

I am trying to replicate the scroll functionality (both video and text) from this website, except my video is a long lottie file. I am using the following frameworks: Nextjs, React, Tailwind The code ...
  • 1
0 votes
0 answers
38 views

Lottie animation gets scaled up

On the project I'm working on, a loader is made with Lottie (so it's an AnimationView that loads a json file). When I put the app in background and enter foreground again, the loader goes from like 2x ...
  • 7,684
0 votes
2 answers
23 views

Place two lottie animation allways on middle of screen independent to screen size

I try to create a splash screen. For that I use two lottie animations. One is a grafic animation, the second is an animated title. this is the code for layout: <RelativeLayout xmlns:android="...
  • 49
0 votes
1 answer
45 views

Run JavaScript function only if you're refreshing the page or coming to the page from external link

We have a Lottie animation that should act as a preloader and show only on the Home page. We want to SHOW this when accessing the home page by: clicking on a link from an external page (not on your ...
0 votes
1 answer
61 views

Next js, Lottie Cannot add property completed, object is not extensible

I have a problem with Lottie's animation. I fetch a JSON file (Lottie Animation) from Contentful, and I want to display it by Lottie Component. But I receive an error: "TypeError: Cannot add ...
1 vote
1 answer
171 views

How to add starting animation delay to lottie-react-native

This is my component and I want the animation to start 0.5s after the page has been landed on. How can I achieve this? No props for delay here: https://github.com/lottie-react-native/lottie-react-...
  • 1,225
1 vote
0 answers
39 views

Optimize javascript build bundle json files

Hello. I'm using Next 13 and lottie I have an object with a lot of components that are jsons like that: import animationA from '../animations/animationA.json' import animationB from '../animations/...
0 votes
0 answers
33 views

Lottie Preloader only show once per session

I have a working preloader that shows a lottie animation when the page is loaded. But I want it to show up only one per session. So that it doesn't show up every time someone opens or loads the page. ...
  • 1
1 vote
0 answers
89 views

How do I make a lottie animation take the full width and height of a flex container?

I want to use this animation: https://lottiefiles.com/18707-dragon-matrix-effect I have adjusted the color to red in order to make it work with my project. It has downloaded as a 512x512 animation. ...
0 votes
0 answers
23 views

Text spacing in Lottie animation is funky

I have a Lottie animation that I've put on a website. The spacing of the text is very strange. Looks good in the AE file but when on the web looks goofy. different spacing for different letters. I ...
0 votes
0 answers
56 views

Lottie animation control stop point

I have a progress bar Lottie Animation in my App Lottie.asset('assets/lotties/progress_bar_lottie.json') It is similar to this one I'd like the the animation to repeat like it does currently but only ...
  • 352
1 vote
1 answer
39 views

Lottie React Native requiring unknown module "2236"

I have problem with lottie-react-native. import React from 'react'; import { StyleSheet, View } from 'react-native'; import LottieView from 'lottie-react-native'; export default function App() { ...
0 votes
0 answers
105 views

Fabric compatibility for 'lottie-react-native' library in ios

Getting the following error while running lottie animation in react native app with fabric enabled. Unimplemented component LottieAnimationView output screen <LottieView source={require('../...
0 votes
3 answers
74 views

Why lottieRef returns only null?

Using the library "@ lottiefiles/react-lottie-player" You need to get lottieRef to interact with animation, but I get null. Code reference: https://codesandbox.io/s/great-rgb-7dp4j0?file=/...
0 votes
0 answers
56 views

Blazor WASM PWA -> offline mode is not loading any resources

I tried almost everything I could found online to make it work but I got to the point where I dont know what to do next. I am trying to have PWA app which is caching so it is working offline. I put 3 ...
  • 23
0 votes
0 answers
32 views

Flutter - Lottie controller loop breaks when playing the animation twice

I coded a simple Lottie animation state manager. From a pool of lottie-json files, each containing also a probability to play, I select one and set the _index to play that file. However, if randomly ...
  • 93
2 votes
1 answer
82 views

Use LottieAnimation in Jetpack Compose for Icon

Is there any way to use a JSON animation file using LottieAnimation in Jetpack Compose for an interactive element such as a to-do list's checkmark so that it animates when clicked? I currently have a ...
1 vote
1 answer
228 views

How to programatically start and stop lottie animations in .NET Maui

I would like to be able to play an animation in my .NET task project whenever I add a task. Right now I'm able to use SkiaSharp.Extended.UI.Maui to load and animate a lottie file. I can also trigger ...
  • 45
0 votes
0 answers
141 views

How to display loader till all the lottie files in webpage are done loading

This is a more general question about the loading behavior of Lottie Animations. Is there a way to tell when the Lottie Animations on a given page are fully loaded and thus displayable? I tried the ...
1 vote
0 answers
29 views

LottieDrawable is not playing the animation in GraphicOverlay.Graphic

I am trying to use LottieDrawable to draw a simple animation. But the animation is not played. I saw in old issues that you need to call mLottieDrawable.setCallBack(this) but since I am extending ...
1 vote
0 answers
133 views

How can I solve OutOfMemory issue with Lottie and ViewPager in Jetpack Compose?

I am using lottie compose with ViewPager. val composition by rememberLottieComposition(LottieCompositionSpec.Asset(tutorial.lottieSrc)) val progress by animateLottieCompositionAsState(...
  • 3,118
0 votes
1 answer
216 views

How can I call a page once in Jetpack compose viewPager?

How can I call this only once? @OptIn(ExperimentalPagerApi::class) @Composable fun TutorialPager( tutorials: List<TutorialViewModel.TutorialUiResources>, state: PagerState, modifier: ...
  • 3,118
0 votes
0 answers
22 views

Lottie animation makes unnecessary horizontal lines only on safari browser

My animation is like small particles moving on a same Direction and looping. Some of the smallest particles makes a horizontal lines while moving only on safari browser. This never happens on other ...
0 votes
0 answers
15 views

How to automat bodymovin in after effects?

I need to automate exporing of ae templates via bodymovin. Can I invoke bodymovin with args from my CEP extension or can I run bodymovin via cli ? or another other tool or library to export comps from ...
0 votes
0 answers
68 views

lottie-player is not working in bootstrap 5 application

When i try to use lottie-player it is showing the below error Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. line this....
0 votes
2 answers
80 views

Lotties have a black background in my NextJS project. How can I make them transparent?

All my LottieFiles (JSON) have a black background when I import them onto my NextJS project. I tried setting background='transparent' on both the Player or the parent div, to no avail. I made sure to ...

1
2 3 4 5
17