brick-a-brack / eagle-animation

EagleAnimation is an awesome, free and open-source stop-motion animation software.

EagleAnimation

EagleAnimation is an awesome, free and open-source stop motion animation software. It is available for Windows, macOS, Linux and also works with any web browser. It's a great alternative to Stop Motion Studio, Dragon Frame and Boats Animator.

👉 This project is supported by Brick à Brack, the non-profit organization that owns Brickfilms.com - The biggest brickfilming community, you can join us, it's free and without ads! 🎥

• ✨ Canon DSLR cameras support - Use and configure your Canon DSLR camera directly.
• ❤️ Friendly timeline - Instantly preview your animation, duplicate and reorganize frames as you want.
• 😎 The highest quality - Use all the power of your camera and animate with the best quality possible!
• 💡 Animator tools - Thanks to onion skin, grid tools and difference mode, animating has never been so easy.
• 💾 Easy export - Export your animation to a video file or export frames to use them in video editing software.
• ⚙️ Adjust camera settings - Control and adjust your camera settings.
• 🪄 Frame averaging - Capture several frames and merge them to reduce picture noise automatically.
• 🥖 Oui-Oui-Baguette - The software is available in several languages to allow everyone to use it.

Get started

• 🚀 Downloads are available on the Github releases page.
• ☁️ Try it directly in your browser using the Web hosted version.
• 🐛 You can report issues on the Github issues tracker.
• 🧑‍⚖️ The source code is published under GPLv3.

F.A.Q. (Frequently Asked Questions)

How to fix: "Eagle Animation" is damaged and can't be opened. You should move it to Trash.

This error occurs because Eagle Animation files are not signed. You can fix the issue by following these instructions: https://www.youtube.com/watch?v=ceGovao817g.

What languages does Eagle Animation support?

Eagle Animation is available in English, French, German, Spanish, Italian, Portuguese, Polish, Esperanto, Bulgarian, Czech, Danish, Greek, Croatian, Latvian, Hungarian, Dutch, Romanian, Slovak, Slovenian, Finnish, Swedish and Russian.

Is Eagle Animation compatible with my camera?

Eagle animation is compatible with all webcams detected by your device and also support DSLR cameras on the Windows version.

Is there a mobile version of Eagle Animation?

There is currently no mobile version of Eagle Animation but you can use the Web hosted version on tablets.

Contribute

Feel free to make pull-requests, help us to translate the software or report issues 😉

The logo was created by Nishant Shukla and sound effects were obtained from Zapsplat.com.

Build and configuration

Some variables can be configured using a .env file, values with a "*" are required.

Name	Description	Example
VITE_PUBLIC_URL	The full url of the assets server, must be ended by a slash "/". If it is not defined, we will use "/".	https://app.eagle-animation.com/
VITE_COMMIT_HASH	The hash of the current git commit, if it is not provided, the bundle will be flagged as "local".	cda02bf88498ce97d947fb357a6e4f459812122a

Build process

• Run npm i --force to install dependencies (--force is required because we use an old dependency).
• Update src/config.js file if needed.
• Run npm run build:win, npm run build:linux, npm run build:mac and npm run build:web to build release files.

Release process

• Update version value in package.json if needed.
• Create a draft release on Github and tag it with the same version number: vX.X.X.
• Merge your branch/dev into master.

Development mode

• Run npm i --force to install dependencies.
• Run npm run start:electron to launch the application in dev mode.
• Run npm run start:web to launch the web app in dev mode.

Telemetry

To improve the quality of Eagle Animation, runtime errors are automatically reported to developpers by using Sentry SDK. You can disable error reporting, just set SENTRY_DSN to "" in src/config.js and rebuild the app.

Compatilibity

Some features are device-dependent or platform-limited. Here's a summary table.

Feature	Windows	MacOS	Linux	Web (Chrome / Edge)	Web (Firefox)	Web (Safari)
Use webcam to take photos	✅	✅	✅	✅	✅	✅
Export captured frames	✅	✅	✅	✅	✅	✅
Video export	✅	✅	✅	✅	✅	✅
Improve quality by reducing the preview framerate	✅	✅	✅	✅	❌	❓
Control webcam settings	✅	✅	✅	✅	❌	❓
Workshop features	✅	✅	✅	❌	❌	❌
Use Canon camera to take photos	✅	❌	❌	❌	❌	❌

eagle-animation's Issues

Add a fullscreen mode

Add a fullscreen mode and an exit button on the homepage

Add masking tools

Add the ability to take two pictures (background and foreground) and mask some part of the foreground picture.

Support Canon cameras on MacOS/Linux using EDSDK

Use the Canon SDK and make bindings to allow user to use Canon camera with Eagle Animation

Upgrade to DND-Kit from `react-sortable-hoc`

I was pulling this down and I couldn't help but notice the need for --force during the install. It looks like the culprit is react-sortable-hoc, which has been deprecated for some time now. It might be useful to upgrade to dnd-kit instead, which is the successor to react-sortable-hoc.

Thoughts?

Support native cameras on web version using web gPhoto2 module

Implement the WASM module web-gphoto2 to support native USB cameras using WebUSB.

https://github.com/GoogleChromeLabs/web-gphoto2

[Sentry EA-20] Audio play() don't work on Mac OS

Failed to load because no supported source was found.

Audio play() don't work on Mac OS

UVC support

Support UVC camera to allow the app to change camera settings like flash, contrast, etc...

Improve UI on mobile / tablets

Rework the UI to improve it on mobile and tablets, it's a requirements for mobile apps and remote camera access.

Does it support running on the web?

Hello, I am preparing to use your project to learn the code. I followed the instructions to execute npm i -- force, npm start, and open it in the browser using the localhost: 8282 port. However, the page prompts that window.IPC is undefined in src/renderer/index.js, so I am not sure if the project does not support it, or if there is a problem with my startup or node environment

Optimize image rendering

• Test WASM image resizing libraries to compare performances (VS canvas)
• Test Sharp native module performances (VS canvas)
• Use WebWorker for canvas resizing to improve main thread performances

Add easing tools

• Allow the user to draw lines/curves on the preview
• Choose an easing mode (linear, ease-in, ease-out, custom...)
• Choose the number of frames for the animation

Webcam not Working in 2.6 on M2 MacBook Air

I have an M2 MacBook Air running Sonoma. Version 2.3.1 was the first version that I installed and it worked just fine using both my iPhone or Logitech C922. I just saw the 2.6 update and none of the cameras will load. I also tried going backwards and the only version that works for me is 2.3.1. All versions since do not load the webcams. They will appear in the camera list but do not activate.

Duplicate support

Allow user to duplicate/unduplicate a frame (And add key shortcuts)
Changes >> Timeline, Player and Animator

Sound support

Add audio multi tracks editor to put sound effects on animations.

Grid overlay

Add a grid overlay for the preview

Onion skin and delete frame

@Maxou44 are you still working in Eagle Animation? I'm giving it a go on a quick project and noticed the onion skinning doesn't update when you delete a frame. It still blends between the live feed and deleted frame, not the frame before the live one. Just in case you needed to know.

Take a photo automatically

Take photos automatically every X seconds, this value must be configurable in camera settings.

Open Sans font offline

The font is loaded from network, copy it in the public directory

Update alert

Add an alert when a new version is available

Keymapping

Eagle animation supports a lot of shortcuts:

Feel free to ask for new key support :)

Support DMX lights

i dont know if you can add Camra zoom through the Sofware
I got the idea after watching this Video) this may help

EagleAnimation should respect XDG user-dirs config

Yikes!

Currently, EagleAnimation commits a very big no-no by not respecting XDG user-dirs config, which contributes to homedir clutter.

eagle-animation/src/electron/actions.js

Lines 14 to 16 in 7edf4bb

	const PROJECTS_PATH = join(homedir(), DIRECTORY_NAME);

To put homedir clutter into perspective, I've recently spent a fair bit of time cleaning my homedir this evening. Here's what it looks like right now:

As you can see, despite the specification being widely adopted, there are many applications that don't respect these directories. Heck, even Windows added the AppData directory in order to attempt to remedy this for Windows users many years ago, and many still don't.

Drop-in Cross-platform Solutions!

However, there are solutions out there that allow you do so in a cross-platform manner, like env-paths or @folder/xdg, among others.

Without having to arduously peruse the XDG Base Directory Specification, I believe the directory most appropriate for the type of content that's stored here is in $XDG_DATA_HOME. This puts all the data in a predictable location, without polluting a user's homedir.

You can reference this directory using env-paths with:

import envPaths from 'env-paths';

// ...

const PROJECTS_PATH = envPaths(DIRECTORY_NAME, { suffix: '' }).data;

Or, with @folder/xdg:

import xdg from '@folder/xdg';

// ...

const PROJECTS_PATH = join(xdg().data, DIRECTORY_NAME);

This should resolve to the correct directory on all platforms:

• Linux: $HOME/.local/share/EagleAnimation
• macOS: $HOME/Library/Application Support/EagleAnimation
• Windows: %APPDATA%\EagleAnimation

What about existing users?

In order to not affect current users of the application, you could simply check to see if $HOME/EagleAnimation exists and use that, otherwise use the appropriate path:

import fs from "fs";
import envPaths from 'env-paths';

const OLD_PROJECTS_PATH = join(homedir(), DIRECTORY_NAME);
if (fs.existsSync(OLD_PROJECTS_PATH)) {
    const PROJECTS_PATH = OLD_PROJECTS_PATH;
} else {
    const PROJECTS_PATH = envPaths(DIRECTORY_NAME, { suffix: '' }).data;
}

or

const OLD_PROJECTS_PATH = join(homedir(), DIRECTORY_NAME);
const PROJECTS_PATH = fs.existsSync(OLD_PROJECTS_PATH) ? OLD_PROJECTS_PATH : envPaths(DIRECTORY_NAME, { suffix: '' }).data;

Going above and beyond!

Another option, of course, would be to move the directory if it exists, but that can be dangerous. That would be more involved, because you would probably want to prompt the user when the application starts to see if they want you to move it with a yes/remind me later/no prompt.

Linux Contributor Support

Seems there's an issue with lightningcss finding the correct node extension when building on Linux.

@parcel/transformer-css: Could not resolve module "~/eagle-animation/node_modules/lightningcss/lightningcss.linux-x64-gnu.node" from "~/eagle-animation/node_modules/lightningcss/node/index.js"
Error: Could not resolve module "~/eagle-animation/node_modules/lightningcss/lightningcss.linux-x64-gnu.node" from "~/eagle-animation/node_modules/lightningcss/node/index.js"
    at $0578d0f6e116167e$export$fb2a0b866a8162dc.resolve (~/eagle-animation/node_modules/@parcel/package-manager/lib/index.js:4991:21)
    at NodePackageManager.resolveSync (~/eagle-animation/node_modules/@parcel/package-manager/lib/index.js:3510:42)
    at NodePackageManager.requireSync (~/eagle-animation/node_modules/@parcel/package-manager/lib/index.js:3352:34)
    at Module.m.require (~/eagle-animation/node_modules/@parcel/package-manager/lib/index.js:3366:25)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (~/eagle-animation/node_modules/lightningcss/node/index.js:21:22)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at NodePackageManager.load (~/eagle-animation/node_modules/@parcel/package-manager/lib/index.js:3375:15)

For those getting a similar error, the workaround seems to be to install the appropriate lightningcss extension manually:

In my case, it's looking for lightningcss.linux-x64-gnu.node, so the following resolved the error:

npm i lightningcss-linux-x64-gnu --force

Don't forget the --force argument, since it's required to resolve other dependency issues in this project.

Good luck!

Supporting export cancellation

When you quit an export, it continues in the background and is not stopped. It should be possible to stop the image export loop and forcibly quit ffmpeg if video generation has begun.

Add frame-by-frame tutorials for beginners

Add tutorials to help beginners animate very basic things, such as a vehicle or a character.

Support several scenes/shots by project

Add the ability to support several scenes/shots by project.

The JSON project file already support this, it contains an array of "scenes".

Export page

Allow user to custom the export settings:

• Codec type
• Compression

It could be nice to allow user to get a normalized version of his frames

Improve Readme

Add information and images to the Readme file

Mac OS and Linux builds

Build the app for Mac and Linux OS :)

Insert frame at a specific position

Allow user to insert frame between 2 other frames

Add the ability apply mirror effect to the camera image (X + Y + Both)

Add the ability apply mirror effect to the camera image (X + Y + Both)

Delete a project

Add a button to delete a project

Short Play

Short Play don't work as excepted

Short play indicator on the timeline

Add an indicator to the timeline when short play is activated to show where playback will start.

Preview thumbnails

Generate preview thumbnails for the timeline

Android app

Build the app for Android using Capacitor.

Upgrade Sentry SDK

Support Smartphone as remote camera

Allow user to use a smartphone as a remote camera

Sound support

Add shutter and delete sound

Show number of displayed frames

Show the number of displayed frames (including duplicated) and don't count hidden / deleted frames

Camera Settings on Mac

Hello! I'm halfway through a kid's camp where we're using Eagle Animation for brickfilms. We're using Windows computers and I noticed that when we plug in the Logitech cameras, there's a bunch of settings to control things like WB and Focus. When I use EA on my MacBook, those options are not there. I have the same Logitech C920 camera that we're using in class.

Support DragonFrame bluetooth/usb controller

add support for DRAGONFRAME BLUETOOTH/USB CONTROLLER
https://www.dragonframe.com/product/dragonframe-bluetooth-controller/
you may need to function

Settings page

Add a setting page to allow user to change:

• Language
• Sound
• Duration of the "Short Play"
• Choose webcam

Allow real frame duplication

Allow the user to really duplicate frame to reuse it in another part of the animation

iOS app

Build the app for iOS using Capacitor.

New Logo

Change the logo for a sexy and awesome logo 🥰

Project import / export

Add the ability to export a Eagle Animation project as a single file (.ZIP?) and add the ability to import these files.

Skip live view during video playback

Allow user to skip live preview when the video is played back in a loop; this feature should be configurable.

Support RAW camera capture

Save Canon cameras photos in RAW, use imagick wasm module to display them in the web app.

https://github.com/dlemstra/magick-wasm

Camera settings are randomly reset

Would it be possible to have an option to save settings? Things like a default camera, checkboxs/switches (like auto focus), as well as export frame rates? Even if they were just project based, rather than application based, it would help a lot with the kids I'm teaching.