Nodes/zhangp365/ComfyUI-utils-nodes/Image Transition Bottom to Top
ComfyUI Node

Image Transition Bottom to Top

A rising slide-wipe between two images

By zhangp365·Created 2 years ago·Updated 5 months ago· 135
Image Transition Bottom to Top
  • before_image
  • after_image
  • images
  • duration
  • fps
duration5.0
fps24
bounce_backfalse
start_end_pause_percent0.09
middle_pause_percent0.15
start_end_position_percent0.06
transition_line_width8

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) and fps (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 when bounce_back is 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.

Categoryutils

Inputs (9)

NameTypeDefaultDescription
before_imageIMAGE
after_imageIMAGE
durationFLOAT5.00.1–60
fpsFLOAT241–120
bounce_backoptBOOLEANfalse
start_end_pause_percentoptFLOAT0.090–0.5
middle_pause_percentoptFLOAT0.150–0.5
start_end_position_percentoptFLOAT0.060–0.5
transition_line_widthoptINT81–20

Outputs (3)

NameTypeDescription
imagesIMAGE
durationFLOAT
fpsFLOAT