Timeline Overhaul

[exothermic0927]

Currently the animation timeline feels very undercooked in comparision to the other features of the app. Not sure if there is an overhaul in the works for it at all, but either way, features that would be greatly appreciated are:

Animation FPS - more of a QoL request than anything but being so close to the edge of the application border, if you have it fullscreened you will find that your click-drag associated slider to the left border clamps very quickly due to the distance from the monitor edge. An infini-scroll would be preferable in this use case, rather than the slider range being defined by monitor size.

Inserting a new blank keyframe currently appends a keyframe to the end of the timeline, forcing you to have to manually drag-place the blank keyframe where you would like it to be in your timeline. The same goes for creating a new duplicate keyframe. Very inconvenient and sometimes frustrating!

Animation folders, for grouping. Colour keying for both standard layers + folders and animation layers + folders would be incredibly helpful for organising complex work. as seen in Photshop for example.

Step forward a frame/Step back a frame/go to end of animation/go to start of animation.
Step forward/back, rewind, step to end are quite essential when animating in order to jump through frames and check animation steps. I see that step forward/back are implemented which is awesome, however I’d still like to see a jump to end and rewind to start.

Loop Play toggle and loop play select - absolutely essential when creating looping animations of any kind, however the ability to toggle it is also very desirable, as is the ability to select a portion of the animation timeline to loop.

Timeline Zoom - being able to zoom in and out on the timeline when working on larger animations is really helpful to be able to see all of the anim frames, or focus in on one specific area.

Decoupling timeline layers from canvas layers - being able to delete a timeline layer should not require that the canvas layer be deleted first. It can very easily clutter up the timeline.

Hope these are worth considering! I really love the application and am a huge fan of the project, so I’d love to be able to use it more often for creating animation work!

[exothermic0927]

Also! One other thought - when creating a new timeline layer, the canvas layer associated is used as the background if there are no keyframes, which feels rather unintuitive - as far as my experimenting has found, I cannot seem to paste the canvas layer into a timeline keyframe, and the logic seems that if I were to turn a canvas layer into a timeline layer, I’d likely want my canvas layer to be rendered in as a keyframe.

[flabbet]

Hey, I’m flabbet, main PixiEditor developer. Thank you for your feedback. It’s really valuable.

A few remarks:

Animation FPS - more of a QoL request than anything but being so close to the edge of the application border …

Yeah, fair enough

---

Inserting a new blank keyframe currently appends a keyframe to the end of the timeline

Perhaps your workflow is more specific, I designed it on an idea that you don’t need to manually drag the active frame cursor to append new layer. So while making an animation you just go “new cel, draw, new cel” instead of “new cel, draw, move cursor to the next frame, new cel”

I’d love to hear your usecase, so I can maybe find a good middle-ground

---

Animation folders, for grouping. Colour keying for both standard layers + folder

Yeah, I can see how that’s useful, though is a bigger feature and will not go into initial 2.0 release.

---

I’d still like to see a jump to end and rewind to start.

That’s super easy to add, along with loop toggle. I might add it fairly soon

---

No Timeline Zoom

It is possible to zoom the timeline, simply use a scroll on the top part (with frame numbers and lines)

---

Decoupling timeline layers from canvas layers - being able to delete a timeline layer should not require that the canvas layer be deleted first. It can very easily clutter up the timeline.

Actually, it might be just an ux issue, but you can delete animation layer by simply deleting all the cels within it. No need to delete an actual layer.

---

when creating a new timeline layer, the canvas layer associated is used as the background if there are no keyframes

I believe that you might have concepts mixed up. I am not sure how Photoshop handles it, but our animation design is closer to Aseprite’s.Timeline layer and canvas layer is the same thing, there is no concept of timeline layer. What you see in the timeline is the “canvas” layer you are animating. So the most left part with layer name, is a preview of the original layer, while cels on the right are this layer images on given frame.

[exothermic0927]

Thanks so much for responding! Much appreciate that you’re willing to hear my input.
in regards to my workflow - I typically work pose to pose, which involves creating keyframes and then creating the inbetween frames between the two. It gives me a lot of control over the timing. Thanks for pointing out the timeline zoom! I didn’t realise that one.

[flabbet]

I see, I’ll do some testing and try improve the workflow regarding that

[flabbet]

@exothermic0927

• I typically work pose to pose, which involves creating keyframes and then creating the inbetween frames between the two

Could you provide me with an example how you would like timeline to behave when inserting a keyframe?

Do I understand correctly that you want to insert a cel in between neighboring cels? Let’s say you have a cel at frame 3 and frame 4, so they are right next to each other, no gaps.

And let’s say, you set the cursor at frame 3 and click new cel. You expect to insert a new cel at frame 4, shifting existing frames that start at 4 and later by one frame?

[Matalya]

I’ve seen this before. If I am correct, what he (they) is(are) saying is that you first make your key frames and space them approximately the amount of frames you expect the animation to last (say f1, f7 and f12), and then going between the key frames and adding your deltas.

[Xalo]

Hello, 3D animator here

I also think the timeline and animation tools should get an overhaul.

The animation workflow often involves quick sketching and fast iteration between frames.

When I tried Pixieditor I found that adding new frames was really tedious, having to click “add empty frame” every time I want to add a new draw is not efficient.

Autodesk Maya has a function called “Auto keyframe toggle” that lets you choose if you want to keep what you modified on a new frame automatically or having to key that changes manually pressing a hotkey.

Here is a demostration from youtube:

youtu.be/ND9KBtgGIHs?si=nGolqdxnOUKZ1Bfs&t=101

I think having a similar toggle would be awesome. Maybe when the user is navigating through frames with the directional arrows, if the frame cursor position is on a blank animation frame it could create a new empty frame, and doing the same while pressing ctrl it creates a clone of the previous frame. Would also be cool to let you change between layers with the up & down arrows.

Nintendo’s Flipnote handles the animation controls really well in that regard, and I think they could be a pretty good reference to start

Also, another useful feature I ask to be added is Clip Studio’s palette hotkey.

Basically It lets you open a floating palette window, pick the color you want from your current palette (also lets you switch palettes on the fly) and then close the palette window (if you want) with the same hotkey.

I know PixiEditor lets you set a hotkey to open your palette menu, but it not really useful for quick-switching colors and is not resizable enough to be comfortable while drawing.

PixiEditor is a wonderful program, thank you for creating it, and for reading this! ^^

[flabbet]

Hey, thanks for the info, about the timeline. I will be improving it with time, thanks for the reference I’ll look into it.

About the palettes. There are 2 ways to achieve what you described:

1. If you have right click mode set to “Show context menu”, right clicking will show a quick palette picker

   

2. You can take palette tab and dock it, for example to the bottom of the screen and squish it. It will create compact picker. Not ideal as you have to traverse the mouse but it may be enough for some

[Xalo]

ohhhh thats great to know!
I think the embebbed palette in the right click menu is good enough for me

About timeline & animation related features… I’ll be always open to give feedback ^^

I understand that there’s a lot to do and polish right now, and that maybe animation is not the main focus of the current development state, but thank you for creating this awesome tool

[bronwen]

I came looking for answers about inserting cels/frames too. My aseprite use leads me to expect that when I have a frame selected and I insert or duplicate a frame, it will apply that action to the cel I have selected, and the result will appear right next to the cel that is selected - it was really surprising in PixiEditor to have the result appear somewhere else. This is congruent with the workflow to draw, add, draw, add, because in that case, the active cel is already at the end of the timeline; it just adds the logic to pay attention to which cel is selected and apply the action locally, if that makes sense. I was thinking about recommending PixiEditor to a friend who currently animates in a very awkward manual way but I think the new cels appearing at the end of the timeline is confusing. In his workflow he also adds frames in the middle fairly often. Even a toggle between the two styles of workflow would be nice!

[flabbet]

Thank you everyone for valuable feedback! I finally managed to take your ideas and put them into PixiEditor.

New timeline is now available in 2.1.0.11-dev. I’d appreciate some feedback about it! I’ll wait with explanation what changed, just to see if changes are intuitive enough for all of you to figure them out by yourself. Most of them are in the proposal, but not all of them.

Here’s a guide on how to switch to development channel

[Xalo]

Sorry I didn’t provide feedback sooner; I haven’t been very active over the last few months and missed the feedback requests.

I just saw in the changelog for version 2.1.0.20 that the timeline improvements have been added to the stable channel, so I came to quickly check the forum and test the changes.

I REALLY like how it turned out. I think that now any indie animator could get a significant amount of work done without leaving PixieEditor, and that’s wonderful!

As for feedback I can offer: I think it would be great to have a separate animated preview window that always (with a toggle option) plays the animation on a loop, and I think it’s better if it’s independent from the preview window because I imagine artists much more talented than me would use the preview window to see how the frame they’re currently drawing is turning out and the animated preview window to see the complete result.

I like the little tutorial we get when we open the timeline for the first time.

I also think that when you drag and slide on the boxes containing attributes to change the numerical value inside them, there could be some kind of indicator or handle on the left side of the box that you can grab to make it easier.

It’s one of those quality-of-life features that I really appreciate, and I almost didn’t realize it was possible because you have to position the mouse very precisely over the number for the mouse icon to change and let you know that it can be done.

Wonderful update, thank you so much!

[Xalo]

Hello again, more ideas for the timeline:

MARKERS

Autodesk Maya has some tools for identifying what specific frames correspond to.

The one I’m proposing is called “markers” or “bookmarks,” which lets you create a colored area with a text label above the section that displays the frame numbers.

This is very useful, since it allows you to identify a single frame as a contact pose or a sequence of 20 frames as a “run cycle,” for example. In a somewhat complex animation, it’s easy to get lost, and being able to distinguish different phases of the animation within the same project helps a lot.

In Maya, timeline markers are tiny, and you have to hover over them for the mouse tooltip to show the name you’ve assigned. I think there’s plenty of space in PixieEditor to place a colored bar with text inside that has a contrasting color. Maya also lets you overlay markers, which I’m not sure if I think is a good idea or not, but it’s certainly useful for marking individual frames within an area defined by a marker.

What you can do, though, is resize the markers on the fly and move them a few frames forward or backward without having to open the “Bookmark Manager,” which also lets you change their name, duration, and range.

By the way, it might be nice to add a hotkey combination that lets you move all the frames within a marker simply by moving the colored container, thereby avoiding the need to select all the frames and layers directly below it. I don’t think it’s essential, but it could be useful, especially in large projects.

Markers in Maya use the shift key to expand the area of a marker and ctrl. to move the marker position, so maybe using alt could serve.

TIMELINE ZOOM

When testing the new version on a 1080p monitor, by the time we reach frame 14, the entire screen is already full, and we have to scroll manually using the horizontal scroll bar.

I know that these kinds of things seem easy to implement but then break everything, but Maya has what I think is the most elegant solution:

It’s a scroll bar that can be resized on both sides, where you can also specify which frame the displayed area starts and ends at.

It’s easier to see it in action.

PLAYBACK OPTIONS

Pixieditor has 5 playback options:

• play/pause
• step back/forward one frame
• step back/forward to the closest cell

Would be useful to have these options too:

• Go to the start/end of the animation
• Cycle the looping options:

1. Play from start to finish
2. Play back and forth (sine oscillation)
3. Loop once

Video example

FAST FRAME DUPLICATION

Could be useful to just alt+click while dragging a frame (or selected frames) to create a copy of that same selection and inserting it where we drop them

And that’s all for now I think. Thank for your time!!

[flabbet]

@Xalo Thank you for your feedback, one thing to note, It’s already possible to zoom the timeline. Just scroll over this panel

or hold SHIFT and scroll anywhere on the timeline