Advanced HTML CSS: Adding a Project to Animations section

[thatblindgeye]

Discussed in https://github.com/TheOdinProject/curriculum/discussions/26390

^{Originally posted by **abirbhattacharya82** September 24, 2023} ### Describe your suggestion Per the responses in the above linked discussion, it'd be advantageous to add a project to the Animation section of the Advanced HTML CSS course. A "dancing Odin-bot" had favorable responses; it ultimately came down to the following options: - An analog clock - An image carousel (we could just yank the image slider from the Dynamic UI lesson out) - A solar system - A funky lil guy (Odin-bot) Depending on the logistics, a project where users are tasked with making a dancing Odin-bot could be a fun way to really practice animations. We would need to provide the "pieces" (i.e. images) of the odin-bot, then from there provide some loose guidelines for what a user has to do for the project. Expected work that would need to be done, assuming we can utilize the design of the Odin logo for this (cc @codyloyd): - [ ] Create a rough outline of what the project should entail, including what concepts from the Animation section would be covered. Note: this should not be a full project outline yet! This can simply be an outline posted in this issue. - [ ] Upon maintainer approval, create image files for the different pieces of the Odin-bot. This would probably just include a head, body, arm, and leg pieces. Could include 2 arm and leg pieces if they'd visually be for a left/right side. This may be something a maintainer should/has to do, but we can see about this once we get to this point. - [ ] Upon maintainer approval, write out the project content proper ### Path Full Stack Javascript ### Lesson Url https://www.theodinproject.com/paths/full-stack-javascript/courses/advanced-html-and-css ### Checks - [X] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) - [ ] Would you like to work on this issue? ### (Optional) Discord Name _No response_ ### (Optional) Additional Comments I would like to happily work on this issue by providing with the project and necessary documents.

[MaoShizhong]

Edit: Oh, you meant to not check that box

[Success1308]

I would like to happily work on this issue by providing with the project and necessary documents.

[mathdebate09]

I was preparing an outline for the project, but how the most common animations about humans are done using a sprite image file, do we plan to animate using these or individual arms/legs, etc. ?

This is sprite of a bird

[joayo13]

for the dancing odin bot, could have him broken into components like so, and try to do something similar to what's shown in this codepen: https://codepen.io/erensuleymanoglu/pen/EqXjOr

[mathdebate09]

for the dancing odin bot, could have him broken into components like so, and try to do something similar to what's shown in this codepen: https://codepen.io/erensuleymanoglu/pen/EqXjOr

Feels more accurate to me! Except we might need sprites for the head-turning-around thing.

[joayo13]

It doesn't have to specifically be what's shown in the codepen. I think it could be cool to leave it open-ended, and you could choose (twerking bot, bot spinning on head breakdance style). As long as it would apply transforms and keyframes in one way or another. We would probably also want the dance to keep looping. I like the idea of also having a light changing in the corner with color transitions that would be like a mini strobe light. With all this, we could cover all of the concepts in advanced css.