Have you ever wondered if ChatGPT can create animations? I was curious too and decided to explore the animation capabilities of this amazing AI chatbot.
In this article, I will lay out how you can create animations using ChatGPT. I will also highlight a few limitations of its creations.
At the end of this article, you will also find a poem written by ChatGPT about its animation prowess.
Let’s go.
Can ChatGPT create animations natively?
Unfortunately no. As of now, ChatGPT doesn’t support animations natively (but it may change in the future, who knows).
ChatGPT is a text wizard. It can certainly manipulate text in countless clever ways but it still lacks the capabilities to create and display animations in its interface.
It doesn’t have any graphic capabilities other than what it can make as ASCII art in code blocks.
All is not lost, however. There’s a workaround to make ChatGPT create animations but it’s not a surefire way and the results may not be pretty.
But it works.
You might know that ChatGPT can write code in computer languages such as CSS, HTML, JavaScript, and a host of others. What if we used ChatGPT’s coding capabilities to create animations in these web technologies?
Will it work? As it turns out, it does.
Below, I give you examples of animation being written by ChatGPT in CSS, HTML, and JS.
Remember that ChatGPT can only write code, it cannot execute it. You will have manually copy the code and then paste it into one of the compatible HTML code runners such as W3schools’ HTML editor.
Let’s see a few examples of animation code written by ChatGPT:
Creating animation with ChatGPT in CSS
CSS stands for cascading style sheets. It is used to style web pages. It also has a few “functions” which let you animate some HTML objects.
Also, you don’t need to use Javascript to create animations using CSS (although JavaScript animations go far and beyond what CSS alone can accomplish).
Here’s a command I give to ChatGPT to make a bouncing ball animation.
Write a code in HTML and CSS for bouncing ball animation. The ball color is purple (#5927e1), it starts bouncing from a height of 100 px, the floor is just a grey shaded line.
The ball mimics its movements with real life. The ball should use ‘ease-in’ transition at its highest point. Also factor in the effect of gravity, meaning that ball should speed up as it falls and should slow down as it bounces up. The animation should run infinitely.
ChatGPT produced this output:
Here’s the code (for you to copy and try yourself):
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 300px;
background-color: #f8f8f8;
}
.ball {
position: absolute;
left: 50%;
bottom: 250px;
transform: translateX(-50%);
width: 50px;
height: 50px;
background-color: #5927e1;
border-radius: 50%;
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%, 100% {
bottom: 250px;
animation-timing-function: ease-in;
}
50% {
bottom: 0;
animation-timing-function: ease-out;
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
</div>
</body>
</html>
And this is how it runs (after making some tiny changes):
In the first attempt, the ball bounced in reverse (it slowed down when falling and speeded up when bouncing), so I pointed that out to ChatGPT and it corrected the code.
Here are a few other commands (with output) that I gave ChatGPT to create more animations:
Write a code for a YouTube loader. 7 dots should move in a circle, one after other.
Here’s the animation:
Note that I gave it a command to make 7 dots move in a circle, but it made them move in a linear direction. That’s one thing where ChatGPT is yet to improve. Sometimes, it gets confused or doesn’t comprehend instructions precisely.
Here’s another animation:
Write CSS/HTML code for a sound bar animation. There should be 7 bars, in VIBGYOR colors. They should rise up and down alternatively creating an illusion of wave. Keep the height of container no more than necessary. Keep the top edges of bars rounded.
Here’s its output:
See the Pen Untitled by Gauri Shanker (@Gsbansal) on CodePen.
I hope you got the point.
We can ask ChatGPT to write code with HTML and JavaScript too.
Create animations with ChatGPT using Javascript
Javascript has several animation libraries such as P5.js, Three.js, Anime.js, and Velocity.js.
Let’s ask ChatGPT to write animation code in P5.js:
I want you to write HTML/CSS/JS code for an animation of a box changing shape from a triangle, to square, pentagon, hexagon and so on till it reaches 12 sides and then, it should become a circle. Use P5.js library for this animation.
Here’s the output (Click to run):
See the Pen Shape changinng animation by Gauri Shanker (@Gsbansal) on CodePen.
I hope you are convinced that ChatGPT can indeed create animations.
However, there are a few limitations to the animations ChatGPT can produce. Let’s discuss them next.
Limitations of animation created by ChatGPT
ChatGPT’s animation capabilities are limited by the languages it can code in. While CSS and JS are great for creating simple animations, they can get complex very quickly.
The animations that I showed above were fairly simple and could be achieved in less than a hundred lines of code, this will not be the case for all animations.
Also, the lengthier the code, the more likely it is that the output written by ChatGPT is riddled with fatal errors. If you are not a coder yourself, editing and correcting the code will be a nightmare for you.
Also, CSS/JS are web technologies, so they are designed to animate simple HTML elements on a webpage. The range of animation effects is limited to moving, transforming, translation, scaling, sliding, fading, and a few others. Although, many JavaScript libraries come packed with tons of more effects.
Therefore, you cannot use ChatGPT for any serious business use case such as to animate characters or to make explainer videos.
These web technologies simply do not possess animation effects such as squash & stretch, Bounce, Anticipation, Arcs, Staging, and Follow-through that make animations realistic.
Also, keep in mind that ChatGPT (currently) doesn’t output more than 600 characters, so a longer code might be cut-off midway.
Creating animated videos using ChatGPT
If you are looking to create animated videos using ChatGPT, you are in for disappointment. ChatGPT cannot (yet) create animated explainer videos.
You might encounter a number of “AI-enabled animation software” such as Deepbrain’s AI studios and Synthesia which claim to create animated videos using ChatGPT.
Well, I believe they are a little bit misleading. ChatGPT’s role in these softwares is limited to writing script for the video, rest of the things have to be done by you, manually.
I am not saying they are bad or that they don’t work. Just that they could be a little more transparent with their promotions.
Final Remarks
So, can ChatGPT create animations? Yes and no.
Yes, because it can certainly write CSS/JS code to create animations. No, because it cannot run that animation natively in its chat interface.
Remember that ChatGPT is a master of text manipulation, so ask it to do anything with text and it will happily oblige.
Hope this article helped. Thanks for reading!