Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

merge and sequence multiple Lottie animation into single animation #18

Open
2 of 3 tasks
anilsoniaurionpro opened this issue Mar 1, 2022 · 7 comments
Open
2 of 3 tasks
Labels

Comments

@anilsoniaurionpro
Copy link

anilsoniaurionpro commented Mar 1, 2022

Overview

Allow to merge or sequence several Lottie animations into single animation (JSON).
Allow to dynamically create animation from other animations.
...

Type

  • New feature
  • Changes to existing features

Motivation

What inspired this feature request? What problems were you facing, or what else makes you think this should be
included?
I am trying to create animation dynamically from existing animations and then export it as video on the frontend only. Right now, I have an internal file format that specifies the sequence, and the whole of exporting it to video is not fast as I've to deal with a sequence in the video too. A single Lottie is easy to deal with.
...

Labels

  • Add the Type: Feature Request label to this issue.
@anilsoniaurionpro anilsoniaurionpro changed the title merge and sequence multiple Lottie animation into single animation [Feature Request] merge and sequence multiple Lottie animation into single animation Mar 1, 2022
@anilsoniaurionpro anilsoniaurionpro changed the title [Feature Request] merge and sequence multiple Lottie animation into single animation [Type: Feature Request] merge and sequence multiple Lottie animation into single animation Mar 1, 2022
@anilsoniaurionpro anilsoniaurionpro changed the title [Type: Feature Request] merge and sequence multiple Lottie animation into single animation merge and sequence multiple Lottie animation into single animation Mar 1, 2022
@github-actions
Copy link

github-actions bot commented May 1, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

@github-actions github-actions bot added the stale label May 1, 2022
@did
Copy link

did commented Feb 5, 2023

👋@anilsoniaurionpro, I've got the exact same need for my current project. Did you make it somehow and if not, do you have any hints? Thanks for your help!

@github-actions github-actions bot removed the stale label Feb 6, 2023
@anilsoniaurionpro
Copy link
Author

👋@anilsoniaurionpro, I've got the exact same need for my current project. Did you make it somehow and if not, do you have any hints? Thanks for your help!

I didn't find any lib to do this. I ended up understanding enough lottie json schema to dynamically merge multiple animations (in js).
In my case, I exported Lottie json with a specific structure and special settings in bodymovin like preserving ids etc to achieve this in easy manner.

@did
Copy link

did commented Feb 7, 2023

thanks @anilsoniaurionpro. I managed to merge my 2 lottie files (same width / height / frames) by doing the same stuff as you did. It wasn't that hard actually, the only "issue" was to rename the refID in the Precomposition layers using some assets.

@anilsoniaurionpro
Copy link
Author

anilsoniaurionpro commented Feb 7, 2023

thanks @anilsoniaurionpro. I managed to merge my 2 lottie files (same width / height / frames) by doing the same stuff as you did. It wasn't that hard actually, the only "issue" was to rename the refID in the Precomposition layers using some assets.

Before merging I did string replacement . Like jsonStr.replaceAll("comp1", nanoid()). do this for comp0 ... to comp20. Assuming there are max of 21 comps. Same for assets.

@anilsoniaurionpro
Copy link
Author

I created a method that took a lottie json and returns a new lottie json (which merges all the layers into a precomp first).
this process involved string replacement to solve refID , assetId issues and moving all the layers to assets.
so the layer contains only a single layer which is the comp. this makes it easy to adjust timings.

After this multiple json are merged in single one.
this includes merging all layers , assets , fonts, markers , chars etc.

@github-actions
Copy link

github-actions bot commented Apr 9, 2023

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

@github-actions github-actions bot added the stale label Apr 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants