05.07.2024 – Pavel Klavík, Kamila Klavíková
Today, we released an update to OrgPad that improves the animation of cell headings when they open. We have removed the annoying flicker, and now the heading moves smoothly to its new position. We're working on other cell animation improvements.
#update, #OrgPad, #improvements, #animations
Great animations are critical to OrgPad. We've paid a lot of attention to them during development. They're not just for show—they make interacting with OrgPad clearer and communicate changes in the document. We use spring-based animations so that cells move naturally to their new positions, much like objects in the real world. Good animations go unnoticed because they're intuitive, while bad ones are distracting and slow you down.
Our animation system is constantly evolving, and today's update is part of that. Opening a cell and displaying its content involves several animations. The cell changes size, the content appears, and the heading may wrap differently. Before, the heading would fade in and out, which was distracting. Now, the heading immediately adjusts to its new wrapping at the start of the animation, making the cell expansion smoother.
This is just the first of several planned animation improvements. You may notice in the video that a dog photo flickers when the cell opens. This happens because the photo appears against a white background. We realized that it looks much better if the photo is there from the beginning, cropped by the cell’s edges as it expands. This results in a simple, clean motion. We tested this today and it looks much better. We only need to tweak a few details.
For multi-page cells, we want to implement a proper crossfade transition. Currently, the old page fades out and the new page fades in, causing a flicker in the middle. This looks especially bad when the pages are almost identical. This article explains how to achieve the desired effect using CSS.
Finally, we plan to improve animations for image cells. When you insert a single image into a cell without a heading, the image goes directly onto the gray canvas. This is great for transparent images and allows for any shape of cell. When we added this feature three years ago, we weren't sure how useful it would be. So, we implemented it in the simplest way possible, without addressing page transition animations. It quickly became clear that this feature allows you to create visually appealing materials and customize the look of an OrgPage. Now we're finally improving transitions between two image pages, or between an image page and a non-image page with a white background.
