Image Transition Bottom to Top
A rising slide-wipe between two images
- before_image
- after_image
- images
- duration
- fps
The mirror image of the pack's top-to-bottom wipe: ImageTransitionBottomToTop slides your outgoing image up and away while the incoming image rises in from the bottom to take over. Same family, same mechanism, opposite direction - pick whichever of the four (this one, top-to-bottom, left-to-right, right-to-left) matches the motion you actually want the cut to carry.
What it's for
It's for building a short transition clip entirely inside ComfyUI - no editing software round-trip. If your two images have a natural "rising" relationship (a reveal, something ascending into frame, a bottom-anchored composition), this reads more intentional than a generic crossfade or a horizontal wipe would.
How it works
The node generates a full frame batch where a boundary line sweeps upward across the canvas over the course of the sequence: the outgoing image's visible area shrinks from the top down while the incoming image grows in from the bottom up. On top of that basic wipe, it layers timing controls - how much the motion pauses at the ends and middle, whether it plays once or bounces back, and how far the slide's start/end points sit from the frame edges.
The inputs and outputs that matter
before_image/after_image(IMAGE) - outgoing and incoming images. They need matching dimensions since the node composites them directly.duration(default 5, 0.1–60) andfps(default 24, 1–120) - set the frame count between them, and both pass straight through as outputs so you can feed a video-combine node's frame-rate input without retyping it.bounce_back(default false) - plays the transition forward then back to the start, rather than stopping once it's complete. Handy for a seamless-looking loop.start_end_pause_percent(default 0.09) - fraction of the total duration held still at the very start and end.middle_pause_percent(default 0.15) - fraction held at the fully-transitioned midpoint, which mostly matters whenbounce_backis enabled.start_end_position_percent(default 0.06) - how far in from the top/bottom edges the slide's motion starts and ends.transition_line_width(default 8) - pixel width of the visible seam drawn along the moving boundary.
Outputs: images (the generated frame batch), plus duration and fps echoed back for convenience.
How to install it
ComfyUI Manager: search "ComfyUI-utils-nodes," install, restart. Or:
cd ComfyUI/custom_nodes
git clone https://github.com/zhangp365/ComfyUI-utils-nodes
Restart ComfyUI. No models involved, this is straightforward image compositing, so there's genuinely nothing to download beyond the node code.
Common issues & troubleshooting
The recurring gotcha across this whole family: before_image and after_image must be the same size, or the composite fails. Resize mismatched sources before they hit this node.
Frame count is derived from duration × fps, not set directly - if the clip feels too short or too jerky, adjust that pair rather than looking for a missing frame-count input. And if you're using this for a single one-shot cut rather than a bounce loop, consider bringing start_end_pause_percent and middle_pause_percent down from their defaults; as shipped they leave a small held beat at the start, middle and end, which reads as intentional in a loop but can feel like a stutter in a straight play-once transition.
Inputs (9)
| Name | Type | Default | Description |
|---|---|---|---|
| before_image | IMAGE | — | |
| after_image | IMAGE | — | |
| duration | FLOAT | 5.00.1–60 | — |
| fps | FLOAT | 241–120 | — |
| bounce_backopt | BOOLEAN | false | — |
| start_end_pause_percentopt | FLOAT | 0.090–0.5 | — |
| middle_pause_percentopt | FLOAT | 0.150–0.5 | — |
| start_end_position_percentopt | FLOAT | 0.060–0.5 | — |
| transition_line_widthopt | INT | 81–20 | — |
Outputs (3)
| Name | Type | Description |
|---|---|---|
| images | IMAGE | — |
| duration | FLOAT | — |
| fps | FLOAT | — |