Animation with ChatGPT and Codex: 5 Things You Can Make Today, Step by Step

Two paths, five recipes

Path A: frames. ChatGPT Images 2.5 makes the stills, and a video model moves them. OpenAI says the model is better at changing only what you ask it to edit while leaving the rest intact, preserves subjects from reference images more faithfully, and follows edits more reliably across multiple turns. It also adds comments on images for targeted edits, and Sketch, which lets you draw inside ChatGPT as a visual reference. That is exactly what animation needs: frame after frame where only the intended thing changes.

Path B: code. Codex, OpenAI's coding agent, writes the animation as code, and a renderer turns that code into an MP4, frame by frame. Codex runs in the ChatGPT desktop app (the Codex app was merged into it on July 9, 2026), in the terminal through the Codex CLI, in IDE extensions, on the web and in GitHub. It comes with ChatGPT plans; check OpenAI's help page for your plan's limits.

The rule of thumb: anything that should look filmed, like people, products, light and camera moves, goes through Path A. Anything that looks like design in motion, like logos, type, charts and captions, goes through Path B. That split is how we run production at A&E: a base frame from an image model, motion from a video model, and code wherever the result has to be exact.

1. Animation with ChatGPT: a consistent character, from storyboard to video clip

What it is: one character who stays the same across several shots, animated into a clip. Good for a short ad, a Reel opener, or a storyboard you want to show a client in motion.

Tools: ChatGPT Images 2.5 for the frames; Veo 3.1 or Kling for the motion.

1. Master character sheet. Front, profile and three-quarter views, outfit and palette, in one image. This is the reference for the whole piece. The fuller method is in our guide to creating a consistent AI virtual influencer.
2. Shot list. One line per shot: what happens, where the camera is, and what changes from the previous shot. That last part is what you'll ask the model for.
3. One frame per shot. Attach the character sheet and ask for a single shot at a time.
4. Targeted edits. When a frame is nearly right, leave a comment on the problem area, or sketch where the hand should go. Everything that already works stays put.
5. Animate. Two approved frames go into Veo 3.1 as the first and last frame. As Kling 4.0 opens, you can feed several frames in as keyframes: it was announced with up to 10, Kling 4.0 Flash is already live for Ultra Yearly subscribers, and the full model is due in October 2026. More in our Kling 4.0 breakdown.

The character sheet prompt:

Create a character reference sheet for a short animated ad.
Character: a woman in her late 20s, short dark curly hair, olive skin, round glasses.
Outfit: mustard-yellow raincoat, navy jeans, white sneakers.
Show the same character three times side by side: front view, profile, three-quarter view.
Neutral standing pose, arms relaxed. Plain light-gray background, soft even studio light.
Under the figures, add a row of color swatches: coat, hair, skin, jeans.
No text except the small view labels.

A shot prompt (with the character sheet attached):

Use the attached character sheet as the only reference for her face, hair, glasses and outfit.
Create shot 3 of 6: she opens a café door and looks back over her shoulder.
Camera: medium shot, eye level, slightly from the right.
Setting: a narrow city street at golden hour, warm light from the left.
Portrait composition. Keep her in the center third and leave empty space on both sides
so the frame can be cropped to 9:16.
Keep her face, glasses, coat and colors exactly as in the reference sheet.

A targeted fix, then the motion prompt for the video model:

Change only her right hand: it should hold the door handle. Leave everything else unchanged.

[video model, first frame + last frame]
She pushes the door open, pauses, and glances back over her shoulder.
Slow push-in, natural pace, no cuts.

What you get: an MP4 clip per shot from the video model (4, 6 or 8 seconds in Veo 3.1), which you cut together into a sequence.

Tip: reference every frame to the master sheet, not to the previous frame. Chaining frame to frame compounds small drift.

Tip: the GPT Image family's documented output sizes, per Wikipedia, are 1024×1024, 1536×1024 and 1024×1536. For a 9:16 Reel, generate in portrait, ask for side margin in the prompt, then crop or outpaint.

2. A looping GIF from a sprite sheet: sticker, icon or moving mascot

What it is: a short motion that repeats, like a mascot walking, an icon pulsing or a sticker for Stories. No video model involved: one grid of frames becomes a GIF.

Tools: ChatGPT Images 2.5, or image generation inside Codex, which as of the September 28, 2026 entry in the official Codex changelog can explicitly request transparent backgrounds. Plus Codex writing a small script that slices and assembles.

1. Ask for a sprite sheet: a grid of one motion cycle, in equal-sized cells.
2. Check that the last frame flows back into the first.
3. Save it to a folder as sprite_sheet.png.
4. Ask Codex to slice, align and export the GIF.

The image prompt:

Create a sprite sheet of one walk cycle for a small cartoon fox mascot.
Layout: 8 frames in a grid of 4 columns by 2 rows, all cells exactly the same size.
Side view, facing right. The fox stands at the same point in every cell;
only the legs, tail and body bounce change from frame to frame.
Frame 8 must flow back into frame 1 so the cycle loops.
Transparent background. No grid lines, no numbers, no shadows.

The Codex prompt:

This folder has sprite_sheet.png: a 4x2 grid of 8 equal frames of one walk cycle.
Write a small Python script that:
1. splits the sheet into 8 frames, left to right, top to bottom;
2. aligns every frame on the character's bottom-center point so the loop doesn't jitter;
3. exports loop.gif at 12 fps, looping forever, keeping the transparent background;
4. saves the single frames as frame_01.png to frame_08.png in a /frames folder.
Run it and show me the result.

What you get: a looping GIF, plus the individual PNG frames if you want to edit further.

Tip: before assembling, check that the character sits at the same point in every cell. One cell that drifts sideways is a hitch in the loop.

3. An animated logo reveal in MP4 with Codex and Remotion

What it is: a logo reveal or kinetic type for video intros and outros. The logo stays exactly the logo, because it's loaded as a file, not redrawn.

Tools: Codex and Remotion, where video is written as React components. Remotion maintains an official plugin for Codex, and lists Codex among its supported coding agents.

Two ways to start:

1. In the ChatGPT desktop app: open the Plugins tab, search for Remotion, install it, start a new project and type $remotion.
2. In the terminal: with Node.js installed, run the commands below, then open Codex (CLI or IDE) in that folder.

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

Drop logo.svg into the public folder and paste this into Codex:

Create a Remotion composition called LogoReveal.
Format: 1920x1080, 30 fps, 5 seconds (150 frames).
Asset: public/logo.svg.
Colors (placeholders, replace with the brand's): background #0B0B0F, tagline #E8E4DA.
Timeline:
- 0.0-1.5s: the logo fades in from 0 to 100% opacity and scales from 85% to 100%, soft ease-out.
- 1.5-4.0s: the tagline "Ideas in motion" types in under the logo, word by word, 0.4s per word.
- 4.0-5.0s: hold everything still for 1 second.
Show it in the preview. When I approve, render it to MP4 (H.264).

What you get: an H.264 MP4, ready for the edit or to post.

Tip: refine scene by scene with precise direction: slower entrance, softer easing, a 0.5-second hold. Codex turns each note into a value in the code, and rendering is deterministic, so the same code always gives you the same video.

Licensing tip: per Remotion's license FAQ, it's free for individuals and companies of up to three people; companies of four or more need a company license. If a studio renders in-house and delivers only the MP4, the client's headcount doesn't count.

4. An animated chart for Reels (1080×1920) with Codex

What it is: data turned into a vertical video: bars that grow, numbers that count up, a headline on top. The numbers come from a file, so new data means a new render, not a redesign.

Tools: Codex and Remotion, set up the same way as recipe 3.

1. Save your data as data.csv in the public folder, with a label column and a value column.
2. Paste the prompt and check the preview.
3. Tune pace and colors, then ask for the render.

Create a Remotion composition called ChartReel.
Format: 1080x1920 (9:16), 30 fps, 12 seconds.
Data: public/data.csv with columns label,value. Read the numbers from the file; do not hardcode them.
Layout: a headline at the top, "Leads per month". Below it, one horizontal bar per row,
in file order, label on the left, value on the right.
Motion:
- 0-1s: the headline fades in and slides down 40px.
- 1-7s: the bars grow from 0 to their value one after another, 0.4s apart, ease-out;
  each value counts up from 0 to its final number while its bar grows.
- 7-12s: hold, and highlight the largest bar in the accent color.
Leave generous empty margins at the top and bottom for the app's interface.
When I approve, render it to MP4 (H.264).

What you get: a vertical 1080×1920 MP4, ready to upload as a Reel.

Variation: the same structure works for a product demo. Swap the bars for screenshots of your product entering in sequence, with a short caption on each screen.

5. A transparent lower third with Codex and HyperFrames

What it is: a name and title that slide in, hold for a few seconds and slide out, on a transparent background. You drop it on top of any footage in your editor.

Tools: Codex and HyperFrames, an open-source HeyGen project under Apache-2.0. It renders HTML and CSS with GSAP, CSS, Lottie or Three.js animation to MP4, can export transparent overlays, and works with Codex.

1. Install Node.js 22 or later and FFmpeg.
2. Open Codex in an empty folder and have it set up HyperFrames from the project's README.
3. Paste the prompt, check the timing, export.

Set up a HyperFrames project in this folder, following the README at
github.com/heygen-com/hyperframes.
Build a lower-third composition:
- Format: 1920x1080, 30 fps, 6 seconds.
- Text: name "Dana Levi" on the first line, title "Head of Marketing" on the second.
- Style: brand font and colors as placeholders: name #FFFFFF, title #D0D0D0,
  a solid accent bar #FF5A36 to the left of the text. No box behind the text.
- Motion (GSAP): 0-0.6s bar and text slide in from the left with ease-out,
  hold for 4 seconds, then slide out to the left with ease-in by 5.2s.
Export it as a transparent overlay I can place on top of footage in my editor.

What you get: a transparent overlay you drag onto a track above your footage.

Tip: with several speakers, ask Codex to read names and titles from a list and export one overlay per person. Same template, same timing, no rebuilding per name.

Which path for which job

What this gives a team

Frames and code are now the cheap part. That frees the team for the work that actually moves the result: planning a sequence, deciding what changes from shot to shot, and directing motion in precise words. A team that can write a shot list and a motion brief can get a logo reveal, a chart, a lower third and a character clip out of these tools in the same week. That's what I teach in workshops for teams, using your own brand's material. To see a full production end to end, read the CRINIÈRE production file or the Better production file.

Want to learn how to direct a result, not just write a prompt? Open the directing guide in OMER METHOD →