{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"the-graph-editor","title":"The panel most people never open","url":"https://addaly.com/learn/motion-and-audio/the-graph-editor","position":4,"of":72,"minutes":9,"answer":"The speed graph is the derivative of the value graph, so the shape of one tells you what the motion is doing between keyframes.","keyIdea":"The speed graph is the derivative of the value graph, so the shape of one tells you what the motion is doing between keyframes, and a rectangular speed graph is the signature of the linear default that makes animation read as wrong."},"body":{"format":"markdown","text":"## Two graphs, and they answer different questions\n\nEvery animation tool has a curve editor, and most people animating in one have never opened it. It is the single highest-leverage panel in the application, because it is the only place the software tells you what it is actually doing between your keyframes.\n\nThere are two views of the same data.\n\n- **The value graph.** Vertical axis is the property's value: pixels, degrees, percent. Horizontal axis is time. The *slope* of this line is the speed.\n- **The speed graph.** Vertical axis is velocity: pixels per second. Horizontal axis is time. A flat line here means constant speed.\n\nThey are not alternatives; one is the derivative of the other. Blender calls the first an F-curve and gives you handles on it. After Effects gives you the value graph for one-dimensional properties like opacity and rotation, and the speed graph for position, because position has two or three dimensions and three overlapping value curves are unreadable.\n\n## What a default keyframe looks like\n\nDrop two keyframes on position, 600 pixels apart, twenty frames apart, and leave them linear. The value graph is a straight diagonal. The speed graph is a rectangle: velocity jumps from zero to 720 px/s at the first keyframe, holds, and drops to zero at the second.\n\nThose two vertical edges are the problem. Nothing in the physical world accelerates from rest to 720 px/s in zero time and then stops dead. Your eye has never seen it and reads it as wrong before you have finished watching.\n\nThe arithmetic is worth doing once by hand. Twenty frames, 600 pixels, linear: exactly 30 pixels of travel every frame, from the first to the last. Now ease the second keyframe out: the same journey might be 90 pixels on the first frame and 2 pixels on the last. Same distance, same duration, completely different reading. That difference lives entirely in the graph.\n\n## How to read a bad animation\n\nOpen the speed graph and look at the shape.\n\n- **A flat top.** The move has a cruise: it reaches a speed and holds it. Fine for a conveyor belt, wrong for anything that started because somebody pressed a button.\n- **A sharp spike.** All the distance is covered in a couple of frames. Reads as a snap. Often exactly what you want for a small UI element and never what you want for a large one.\n- **A hump that peaks late.** Slow start, fast finish. This is an ease-in, and it reads as something falling or accelerating away. If you applied it to an arriving element, that is your bug.\n- **Two humps.** Something between your keyframes is being overshot and pulled back. Usually an accidental spatial bezier.\n- **The curve dipping below zero.** The property is briefly moving backwards. On position this is a bezier handle overshooting; on scale it is a value going negative and flipping the layer.\n\n## Spatial and temporal are separate\n\nThis catches everybody once. In After Effects, a position keyframe has *two* independent interpolations: how the value moves through space (the path on the canvas) and how it moves through time (the speed graph). You can have a perfectly eased speed graph on a path that loops in a curve you never asked for, because the spatial interpolation defaulted to bezier and the software auto-smoothed a corner.\n\nIf a layer travels in an arc you did not draw, the fix is in the composition viewer (select the keyframes and set spatial interpolation to linear) not in the graph editor.\n\n## The free path\n\nYou do not need a paid tool to get a proper curve editor.\n\n- **Blender** has the best free graph editor of any of them. Every animatable property becomes an F-curve; handles are fully editable; there are built-in modifiers for cycles and noise. It animates 2D shapes, text and grease pencil, not only 3D.\n- **Glaxnimate** is a small, fast vector animator with per-keyframe easing, and it exports Lottie.\n- **Synfig** gives each waypoint an interpolation type (TCB, ease, linear, constant) rather than free handles, which is more restrictive but readable.\n- **Kdenlive** exposes keyframe curves on effects, with a limited set of easing options. Enough for a title, not enough for character work.\n\nName After Effects in a portfolio because job listings name it. Learn the ideas in Blender if that is what you have, because the ideas are identical and the F-curve editor is more honest about what it stores.\n\n## The limitation\n\nA graph editor is a measuring instrument. It shows you what is happening and never tells you what should happen. Two animators looking at the same curve will disagree about whether it is right, and both can be correct for different pieces. What it removes is the category of problem where you keep adding effects because you cannot see that the underlying motion is a rectangle.\n\nThe habit worth building: when something feels off, open the graph *before* you add anything."},"check":{"question":"A layer eases in and out correctly according to its speed graph, but on the canvas it travels in a gentle curve rather than the straight line intended. What is going on?","options":[{"text":"The ease has been applied to too many frames, so the software is compensating by curving the path to preserve the total distance.","correct":false,"tempting":"Invents a coupling between timing and path; easing redistributes time along a path and never changes the path's geometry."},{"text":"The speed graph is a fundamentally different kind of animation from the value graph, and choosing it commits the layer to curved spatial motion that can only be straightened by switching back to value curves.","correct":false,"tempting":"Treats the speed graph as a different kind of animation rather than a different view of the same keyframes."},{"text":"The spatial interpolation is bezier while the temporal interpolation is eased; they are independent settings, and the path has been auto-smoothed in the viewer.","correct":true},{"text":"The anchor point is offset from the layer centre, so rotation is being introduced into the position channel.","correct":false,"tempting":"A real cause of unexpected movement, but it produces an arc around the anchor during rotation, not a curved path on a pure position move."}]},"prev":{"slug":"frames-are-the-unit","title":"Frames, not seconds","url":"https://addaly.com/learn/motion-and-audio/frames-are-the-unit"},"next":{"slug":"why-ease-ease-still-looks-wrong","title":"Why pressing Easy Ease still looks wrong","url":"https://addaly.com/learn/motion-and-audio/why-ease-ease-still-looks-wrong"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'The panel most people never open', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/the-graph-editor (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"The panel most people never open","courseTitle":"Motion, Sound and Music","module":{"index":1,"slug":"how-motion-reads-as-real","title":"How motion reads as real"},"answer":null,"keyIdea":"The speed graph is the derivative of the value graph, so the shape of one tells you what the motion is doing between keyframes, and a rectangular speed graph is the signature of the linear default that makes animation read as wrong.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"two-graphs-and-they-answer-different-questions","runs":[{"text":"Two graphs, and they answer different questions"}]},{"t":"p","runs":[{"text":"Every animation tool has a curve editor, and most people animating in one have never opened it. It is the single highest-leverage panel in the application, because it is the only place the software tells you what it is actually doing between your keyframes."}]},{"t":"p","runs":[{"text":"There are two views of the same data."}]},{"t":"ul","items":[[{"text":"The value graph.","b":true},{"text":" Vertical axis is the property’s value: pixels, degrees, percent. Horizontal axis is time. The "},{"text":"slope","i":true},{"text":" of this line is the speed."}],[{"text":"The speed graph.","b":true},{"text":" Vertical axis is velocity: pixels per second. Horizontal axis is time. A flat line here means constant speed."}]]},{"t":"p","runs":[{"text":"They are not alternatives; one is the derivative of the other. Blender calls the first an F-curve and gives you handles on it. After Effects gives you the value graph for one-dimensional properties like opacity and rotation, and the speed graph for position, because position has two or three dimensions and three overlapping value curves are unreadable."}]},{"t":"h2","id":"what-a-default-keyframe-looks-like","runs":[{"text":"What a default keyframe looks like"}]},{"t":"p","runs":[{"text":"Drop two keyframes on position, 600 pixels apart, twenty frames apart, and leave them linear. The value graph is a straight diagonal. The speed graph is a rectangle: velocity jumps from zero to 720 px/s at the first keyframe, holds, and drops to zero at the second."}]},{"t":"p","runs":[{"text":"Those two vertical edges are the problem. Nothing in the physical world accelerates from rest to 720 px/s in zero time and then stops dead. Your eye has never seen it and reads it as wrong before you have finished watching."}]},{"t":"p","runs":[{"text":"The arithmetic is worth doing once by hand. Twenty frames, 600 pixels, linear: exactly 30 pixels of travel every frame, from the first to the last. Now ease the second keyframe out: the same journey might be 90 pixels on the first frame and 2 pixels on the last. Same distance, same duration, completely different reading. That difference lives entirely in the graph."}]},{"t":"h2","id":"how-to-read-a-bad-animation","runs":[{"text":"How to read a bad animation"}]},{"t":"p","runs":[{"text":"Open the speed graph and look at the shape."}]},{"t":"ul","items":[[{"text":"A flat top.","b":true},{"text":" The move has a cruise: it reaches a speed and holds it. Fine for a conveyor belt, wrong for anything that started because somebody pressed a button."}],[{"text":"A sharp spike.","b":true},{"text":" All the distance is covered in a couple of frames. Reads as a snap. Often exactly what you want for a small UI element and never what you want for a large one."}],[{"text":"A hump that peaks late.","b":true},{"text":" Slow start, fast finish. This is an ease-in, and it reads as something falling or accelerating away. If you applied it to an arriving element, that is your bug."}],[{"text":"Two humps.","b":true},{"text":" Something between your keyframes is being overshot and pulled back. Usually an accidental spatial bezier."}],[{"text":"The curve dipping below zero.","b":true},{"text":" The property is briefly moving backwards. On position this is a bezier handle overshooting; on scale it is a value going negative and flipping the layer."}]]},{"t":"h2","id":"spatial-and-temporal-are-separate","runs":[{"text":"Spatial and temporal are separate"}]},{"t":"p","runs":[{"text":"This catches everybody once. In After Effects, a position keyframe has "},{"text":"two","i":true},{"text":" independent interpolations: how the value moves through space (the path on the canvas) and how it moves through time (the speed graph). You can have a perfectly eased speed graph on a path that loops in a curve you never asked for, because the spatial interpolation defaulted to bezier and the software auto-smoothed a corner."}]},{"t":"p","runs":[{"text":"If a layer travels in an arc you did not draw, the fix is in the composition viewer (select the keyframes and set spatial interpolation to linear) not in the graph editor."}]},{"t":"h2","id":"the-free-path","runs":[{"text":"The free path"}],"role":"free"},{"t":"p","runs":[{"text":"You do not need a paid tool to get a proper curve editor."}]},{"t":"ul","items":[[{"text":"Blender","b":true},{"text":" has the best free graph editor of any of them. Every animatable property becomes an F-curve; handles are fully editable; there are built-in modifiers for cycles and noise. It animates 2D shapes, text and grease pencil, not only 3D."}],[{"text":"Glaxnimate","b":true},{"text":" is a small, fast vector animator with per-keyframe easing, and it exports Lottie."}],[{"text":"Synfig","b":true},{"text":" gives each waypoint an interpolation type (TCB, ease, linear, constant) rather than free handles, which is more restrictive but readable."}],[{"text":"Kdenlive","b":true},{"text":" exposes keyframe curves on effects, with a limited set of easing options. Enough for a title, not enough for character work."}]]},{"t":"p","runs":[{"text":"Name After Effects in a portfolio because job listings name it. Learn the ideas in Blender if that is what you have, because the ideas are identical and the F-curve editor is more honest about what it stores."}]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"A graph editor is a measuring instrument. It shows you what is happening and never tells you what should happen. Two animators looking at the same curve will disagree about whether it is right, and both can be correct for different pieces. What it removes is the category of problem where you keep adding effects because you cannot see that the underlying motion is a rectangle."}]},{"t":"p","runs":[{"text":"The habit worth building: when something feels off, open the graph "},{"text":"before","i":true},{"text":" you add anything."}]}],"check":{"question":[{"text":"A layer eases in and out correctly according to its speed graph, but on the canvas it travels in a gentle curve rather than the straight line intended. What is going on?"}],"options":[{"text":[{"text":"The ease has been applied to too many frames, so the software is compensating by curving the path to preserve the total distance."}],"correct":false,"tempting":[{"text":"Invents a coupling between timing and path; easing redistributes time along a path and never changes the path’s geometry."}]},{"text":[{"text":"The speed graph is a fundamentally different kind of animation from the value graph, and choosing it commits the layer to curved spatial motion that can only be straightened by switching back to value curves."}],"correct":false,"tempting":[{"text":"Treats the speed graph as a different kind of animation rather than a different view of the same keyframes."}]},{"text":[{"text":"The spatial interpolation is bezier while the temporal interpolation is eased; they are independent settings, and the path has been auto-smoothed in the viewer."}],"correct":true,"tempting":null},{"text":[{"text":"The anchor point is offset from the layer centre, so rotation is being introduced into the position channel."}],"correct":false,"tempting":[{"text":"A real cause of unexpected movement, but it produces an arc around the anchor during rotation, not a curved path on a pure position move."}]}],"order":[1,2,0,3],"why":null},"prev":{"slug":"frames-are-the-unit","title":"Frames, not seconds","minutes":9},"next":{"slug":"why-ease-ease-still-looks-wrong","title":"Why pressing Easy Ease still looks wrong","minutes":10}}}