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
• [ ] 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.

[mao-sz]

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.

[Meltasy]

I think that adding a project to practice what was taught in the Animation section is a great idea, and the dancing odin bot seems like a good project that would cover most of what was taught. Is someone already working on this? If not, I would be happy to contribute. Just let me know if there's anything I can do. Thanks and have a lovely day :-)

[BUTURUM]

Hello, everyone! I found this issue from Read World Git lesson and thought that it would be nice challenge to actually contribute.

I personally think that Solar System is better project idea than Odin-bot, because although our funky-guy is super cute, he won't hold much value outside Odin community. This isn't kind of project that student will put in their portfolio or show their friends, since they wouldn't understand the point of project.

This brings me to my second point: Solar System project is actually solving a problem, which people might have in real life. You can picture hypothetical museum or space organisation wanting to put animation of orbits on their website. I believe students would be more exited to work on realistic issue. We can even put scenario in assignment brief, e.g: "You are creating solar system model for local school..."

Tomorrow I'm going to publish demo and suggest lesson structure, for now here is a photo of my current progress:

[BUTURUM]

Well it took me more than one day, but here is a demo (open from desktop) of a solar system project. As you can see from my profile I never contributed to this repository, so any critic and guidance will be welcomed.

Lesson Structure

"In this lesson you are going to build intractable web-model of solar system with animation of planets rotating around their star and function to select each planet. You can model our solar system or create something fictional and abstract"

(Below is draft version of assignment brief, which is ment to explain project's requirement to contributors rather than students).

Mapping solar system

1. Create list with sun and your first planet's orbit as list items
2. Ensure that all items are centred and placed on top of each other. You may want to use position: absolute or grid-area: 1 / -1 for this.
3. Add more orbit adjusting their diameter and place planets on them. Customise planets size and color.
4. Create animation of orbit rotation using CSS keyframes and assign this animation.

Making it intractable

1. Add control panel to allow user select each planet in your solar system.
2. Create script which would react to user interaction and add sort-of .current class to necessary elements.
3. Create animation of planet being selected using CSS transition for both control panel and planet/orbit elements in the system.

Extra credit

1. Add 3d effect by tilting the system in perspective. You may need to change transform-style to preserve-3d for this.

Usage of CSS taught in the section

In order to build this project students would need to use following knowledge from previous lessons of Advanced HTML/CSS:

• Transform: for positioning orbit and planets, for rotation of orbits, for tilting solar system in 3D (additional credit).
• Keyframes: for orbits' rotation animation.
• Transition: planets' selection animation.

Note about additional credit

I am proud that my solar system modal have 3D effect, however it was painful to code and I spent as much time on as I spent on rest of the project. I even needed to reverse-engineer this project to figure out the solution. Depending of how important it is to include 3D transformation properties or not, we leave or change extra credit. Alternative might be adding moons to planets and making them rotate.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[BUTURUM]

Hello @MaoShizhong, @thatblindgeye, It seems like several people (including me) have proposed their solutions and are ready to work on this issue. Yet issue has been marked stale few month ago.

Could you appoint me or anyone else in this discussion to work on this issue, or simply close it unresolved?

[mao-sz]

Apologies @BUTURUM, it looks like this one has long slipped through the cracks.

I'm no longer in an active staff role but I've passed the message on to those who are to have a look.

[JoshDevHub]

@TheOdinProject/html-css Would anyone be willing to give this a further look? The maintainers who were guiding this work have either stepped away or are on a bit of a hiatus, but I think this type of project would be a really cool addition to the curriculum. And there is a contributor who's motivated to make it happen 🙏

[CJohnston079]

If help is still wanted on this, I'd love to lend a hand.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[mao-sz]

Going to put this issue on hold for now, since the author is currently on hiatus. We will discuss this as a team when we get round to it and eventually decide how we wish to proceed, and update here accordingly.

Thanks to everyone for sharing their interest and sorry this one slipped through the cracks for so long!

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[thatblindgeye]

@CJohnston079 @BUTURUM apologies for such delay with this issue. First I just wanted to see if there was still interest from either of you regarding this issue?

What such an actual project would entail will depend on a) if it covers the topics leading up to it, b) is scoped in skill level for where it's placed in the curriculum, and c) is doable within an appropriate amount of time (we don't want anyone spending months trying to solve this/create a project that is simple in scope albeit maybe less simple in concepts)

[BUTURUM]

@thatblindgeye Yes, I would still be interested in working on this issue.

[thatblindgeye]

@BUTURUM Let me take some time to take a closer look at your solar system proposal. From a really quick look of the code it seems like it would cover stuff a user would already have come across in the curriculum (had to check if we covered CSS vars before this point), and visually it looks cool and is simplistic which is great. I'd want to just see what tweaks might be worth making in either the expected code or the lesson spec.

[CJohnston079]

@thatblindgeye @BUTURUM I'm also happy to work on this if needed. I feel the proposal is a worthwhile addition, though I had no part in it. If an extra pair of hands would help, just let me know.

[BUTURUM]

@thatblindgeye Have you clarified whether my proposal fits into curriculum or not? If CSS variables are the problem the project is still doable without them.

[thatblindgeye]

@BUTURUM I think CSS variables are fine to include, probably just worth evaluating whether some are needed.

Would you want to try putting a draft up of a project lesson for this? Some notes from your outline above:

• Let's not include any extra credit/steps for adding 3D effects, just focus on the main animation aspects
• We may want to at least mention the sizing increments for each planet (e.g. "Make sure that the size of each planet matches the following order, from smallest to biggest" or something. We probably don't need to call out exact unit sizes, just something to tell users that Earth should be smaller than Saturn for example.
• Similar about the animations speeds, probably don't need to call out exact values, just something that conveys "Earth should move faster than Saturn"
• While I do like the aspect from your demo of being able to "highlight" a planet, not sure if it's necessary to include in the project. I suppose it may be additional practice of transitions and such, so if we do want to include it, I think we should tweak what you have in your demo in the following ways:
  • Rather than using <a> elements, button should be used with an onClick handler. Semantically a button makes more sense in this context.
  • Maybe clicking the same planet again will deselect it? Not a huge deal if not

Let me know if you have any questions or need any help or anything, and of course if CJohnston is willing feel free to collaborate with them as well!

[BUTURUM]

@thatblindgeye Yes I would gladly make a draft of a project lesson. I estimate this going to take me one week to draft the lesson and update the demo. Can I be appointed responsible for this issue, so I can make pull request?

Now about the corrections you gave me…

About Measurements

Planet sizes and distances between them weren't accurate to begin with. Since solar system is 99.999999% empty space using real measurements would be useless and unrepresentative. I will include a note about that in project lesson, telling to use made-up measurements that make model useful and pretty.

I however think we should leave learners with an option to use accurate planets' speed, because that pretty cool. That wouldn't be a requirement though.

About Planet Highlighting

So the idea behind planet highlighting was to force learner to use transition property. Primarily on button - not planet. The main advantage of this project over others is that it's realistic, it's something you might be asked to make on actual job. What could be a more realistic animation task than making transition for a button?!

(Now that I think about it I realise that making a button transition is more useful then the rest of the project)

The demo implements that awfully though, I agree. For some reason I decided to highlight planet through URL (look at the js file if you want to laugh). I can easily change it though.

[BUTURUM]

Hello @thatblindgeye I drafted pull request as you asked.