diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e40b43975..428012d5d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@
 * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
 * Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425))
 * Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
+* Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641))
 
 ## 3.59.1
 
diff --git a/src/compiler/compile/compiler_errors.js b/src/compiler/compile/compiler_errors.js
index 02b0f7120a..b3b2f1c4bd 100644
--- a/src/compiler/compile/compiler_errors.js
+++ b/src/compiler/compile/compiler_errors.js
@@ -138,6 +138,10 @@ export default {
 		code: 'invalid-action',
 		message: 'Actions can only be applied to DOM elements, not components'
 	},
+	invalid_animation: {
+		code: 'invalid-animation',
+		message: 'Animations can only be applied to DOM elements, not components'
+	},
 	invalid_class: {
 		code: 'invalid-class',
 		message: 'Classes can only be applied to DOM elements, not components'
diff --git a/src/compiler/compile/nodes/InlineComponent.js b/src/compiler/compile/nodes/InlineComponent.js
index 558ab1e78e..792b931656 100644
--- a/src/compiler/compile/nodes/InlineComponent.js
+++ b/src/compiler/compile/nodes/InlineComponent.js
@@ -59,7 +59,9 @@ export default class InlineComponent extends Node {
 				? new Expression(component, this, scope, info.expression)
 				: null;
 		info.attributes.forEach(
-			/** @param {any} node */ (node) => {
+			/** @param {import('../../interfaces.js').BaseDirective | import('../../interfaces.js').Attribute | import('../../interfaces.js').SpreadAttribute} node */ (
+				node
+			) => {
 				/* eslint-disable no-fallthrough */
 				switch (node.type) {
 					case 'Action':
@@ -88,6 +90,8 @@ export default class InlineComponent extends Node {
 						return component.error(node, compiler_errors.invalid_transition);
 					case 'StyleDirective':
 						return component.error(node, compiler_errors.invalid_component_style_directive);
+					case 'Animation':
+						return component.error(node, compiler_errors.invalid_animation);
 					default:
 						throw new Error(`Not implemented: ${node.type}`);
 				}
diff --git a/src/compiler/interfaces.d.ts b/src/compiler/interfaces.d.ts
index 52fd723170..43e5ece4fd 100644
--- a/src/compiler/interfaces.d.ts
+++ b/src/compiler/interfaces.d.ts
@@ -51,7 +51,7 @@ export type DirectiveType =
 	| 'Ref'
 	| 'Transition';
 
-interface BaseDirective extends BaseNode {
+export interface BaseDirective extends BaseNode {
 	type: DirectiveType;
 	name: string;
 }
diff --git a/test/validator/samples/animation-on-component/errors.json b/test/validator/samples/animation-on-component/errors.json
new file mode 100644
index 0000000000..b6e5ade74f
--- /dev/null
+++ b/test/validator/samples/animation-on-component/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "invalid-animation",
+		"message": "Animations can only be applied to DOM elements, not components",
+		"start": {
+			"line": 7,
+			"column": 8
+		},
+		"end": {
+			"line": 7,
+			"column": 19
+		}
+	}
+]
diff --git a/test/validator/samples/animation-on-component/input.svelte b/test/validator/samples/animation-on-component/input.svelte
new file mode 100644
index 0000000000..cb8a986586
--- /dev/null
+++ b/test/validator/samples/animation-on-component/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	function foo() {}
+</script>
+
+<Widget animate:foo />
\ No newline at end of file