Animation Academy teaches you CSS animations using the transition and animation properties.

Overview

Animation Academy

AnimationAcademy
Open Animation Academy >

Contents


Background

Welcome to Animation Academy! Learn how to make a webpage interactive using the transition and animation CSS properties. Your goal is to make this webpage interactive, just follow the prompts to polish this site up!

CSS Animations make a web experiences engaging by selecting static HTML elements and changing their properties for a period of time. This can be in response to user actions, or an event such as a scroll or page load.

The game will start with transitions. The prompt provides instructions on the level objective as well as syntax hints. The advanced section, animations, will teach users how to animate elements with percentage states, @keyframes, and further polish animations by smoothing them out.


Built With

This website was built without external API's or dependencies.

  • Node.js
  • HTML
  • SCSS
  • webpack
  • Vanilla DOM manipulation

In addition, this project will include:

  • a production README.md file

Functionality

User's are able to:

  • type CSS into a pseudo IDE
  • once the level is completed successfully the CSS from that is applied to the DOM
  • a temporary overlay will notify them of level success
  • reset to level 0
  • navigate forwards and backwards between levels

Feature Highlights

Dynamically Create & Update the Prompt & Ide

Prompt:

updatePromptContent(currentLevel) {
    // lesson id
    const lessonId = document.querySelector('.lesson-id');
    lessonId.innerHTML = "Lesson: " + `${currentLevel.lessonNumber}`;
    // lesson title
    const title = document.querySelector('.prompt-title');
    title.innerHTML = `${currentLevel.promptTitle}`;
    // lesson instructions
    const instructions = document.querySelector('.prompt-instruction');
    instructions.innerHTML = `${currentLevel.promptInstructions}`;
    /// lesson hints
    const hintsList = document.querySelector('#prompt-hint-list');
    this.updateHints(hintsList, currentLevel);
  }

Ide:

updateIdeContent(currentLevel) {
    // generate correct amount of line numbers
    this.updateLineNums(currentLevel);
    // update textarea for size of solution
    this.updateInput(currentLevel);
    // update boiler code before & after user input
    this.updateBoilerCode(currentLevel);
  }

RegEx Solution Matcher

    regexCheck(inputTextArr, solution) {
      const regexMatchers = [];
      // build regex array containing solutions
      for (let i = 0; i < solution.length; i++) {
        const regex = new RegExp(solution[i]);
        regexMatchers.push(regex);
      }
      let numMatches = 0;
      // match every input with regexMatchers
      for (let i = 0; i < inputTextArr.length; i++) {
        const input = inputTextArr[i];
        for (let j = 0; j < regexMatchers.length; j++) {
          const regex = regexMatchers[j];
          if (input.match(regex) !== null) {
            // increment numMatches if match found
            numMatches += 1;
          }
        }
      }
      // check if all solutions are matched
      if (numMatches >= solution.length) return true;
      return false; // if input not matched, it was wrong
    }

On level success, level specific animations added to DOM and overlay event triggered

  levelAnimation() {
    // dynamically grab this level's animations to apply to DOM
    const animation =
      this.animationKey[this.currentLevel.lessonNumber]
    animation(); // invoke the animations
    // pull the correct success message for this level
    const successMessage = this.currentLevel.successMessage;
    // invoke the level success overlay with the message
    this.levelFunctionality.levelSuccessAnimation(successMessage)
    this.renderNextLevel() // render next level (update prompt & ide)
  }

Wireframes

CSS Animation Game Wireframe - Figma

Wireframe

Implementation Timeline

Thursday

  • Project scope, features, wireframes, tech stack

Fri - Sun

  • Solidify the levels for each section
  • Design style, color themes
  • List of all game assets needed
  • Fonts
  • HTML/CSS skeleton of all elements needed for MVP
  • CSS Reset
  • CSS grid system

Mon

  • Complete UI for base game
  • Finalize all game assets
  • Section #1: transforms

Tue

  • Game logic, event loops, and check user input logic
  • Section #2: animations and keyframes

Wed

  • Refine instructions, prompts, and hints
  • Bug testing and refactoring

Thu

  • Deployment to GitHub

Features In Development

  • Generating levels from a csv file, parsing in real time
  • Checking user input on the fly using throttle/debounce (versus only on button click)
  • Clearly notifying user if input is incorrect
  • Additional levels covering
    • More basic transition levels to teach the fundamentals
    • Loading animations using multiple svgs
    • Placeholder animations on page load (before content is ready)
    • Advanced @keyframe animations
  • Disable level navigation levels unless user has completed the level
  • User hints if they are lost
    • use localStorage to save all levels completed, not just current level
  • Products levels:
    • Reveal text via animation on hover
    • Scrollable interface with transitions
  • CSS Timeline levels
    • animate in on scroll events
  • Refine game for all screen types and inputs (mobile, tablet, laptop, desktop)

You might also like...

JavaScript animation engine

JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

Dec 30, 2022

Accelerated JavaScript animation.

Velocity beta NPM: npm install velocity-animate@beta Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r

Jan 5, 2023

GreenSock's GSAP JavaScript animation library (including Draggable).

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 8, 2023

CSS3 backed JavaScript animation framework

Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be

Dec 30, 2022

React particles animation background component

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Dec 24, 2022

GreenSock's GSAP JavaScript animation library (including Draggable).

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 5, 2023

Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Jan 3, 2023

Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

Dec 5, 2022

Create scroll-based animation without JavaScript

Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

Jan 4, 2023
Owner
Jacob Benowitz
App Academy student woot woot
Jacob Benowitz
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Jan 4, 2023
Matteo Bruni 4.7k Jan 4, 2023
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 334 Dec 11, 2022
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023
Create beautiful CSS3 powered animations in no time.

Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat

Tictail 6.2k Dec 30, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR

Florian DE LA COMBLE 34 Nov 25, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023