Animations and Transistions

Please watch the videos under Resources before class.

Recreated three existing animations (3 points)

Your first objective is to setup a new liveview under /animations that will host and display your animations.

Afterwards find three existing CSS-only animations that you really like and feature them on your animations page. You can draw from the the following resources but also find something else on the internet:

• Animation Examples
• Loaders & Spinners

Instead of adding your css to a <style> section like featured in the video we will add that CSS properly to our CSS file so it gets optimized for production and included into the assets-bundle.

In your assets/css/app.css add a layer components in which you can drop all your custom css:

  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  /* This file is for your main application CSS */

  @layer components {
    /* Add your animation css and keyframes in here */

  }

You will get points if

• you created an AnimationsLive LiveView that is hosted under /animations
• your LiveView correctly displays all the animations

I recommend also posting a link <.link> and a paragraph <p> to the websites you found the animations on to provide some additional context/reference.

Create your own loading animation (1 point)

Make an infinitely repeating, custom animation not already featured. It should have light and dark mode styling.

To earn points all of the following must be true:

• Animation must look good in dark and light mode (show both mods when grading)
• animation plays infinite
• animation is smooth and the start state is the end state (no jumping)
• animation cannot be a modification of an existing loader/spinner

I want this point to be easily accessible to everyone but still briefly ensure while grading that your partner didn't just obviously copy an existing spinner. I'll leave the final judgement call to you, please don't ask me to police here.

Replicating existing animation (3 points)

Do the following example yourself. Don't try to find it in the internet or ask AI to do it for you. Its more fun and you'll learn much more that way!

Our objective is to replicate the animation found via the video under Resources as close as possible.

To earn points all of the following must be true:

• bars increase / decrease in height in a delayed, linear fashion
• bars are rounded on the top
• bars change gradually in colors from green to white
• there are 8 animated bars
• the animation plays indefinately

Tips:

• look at the other animation examples that were given and find similar animation patterns that you can recycle for your animation.
• create each bar as a <div> element, all of the wrapped in another <div> element
• give appropriate classes to your elements so you can identify them in your CSS code.
• animate one bar to completion, do the others afterwards
• there is a property animation-delay you may exploit for consecuitve bars