Understanding Javascript Animations

Currently at Flatiron we are learning all about Javascript and how it interacts with both the front-end and back-end of our application. The visual design of the User Interface can be what makes or breaks your app. No matter how complexed your application is, It will not succeed if it is not visually appealing to your target consumer.

That being said, I wanted to jump into some basic javascript animations, see how they work, how they are coded into an application, and get a basic understanding so that I can use animations in future projects of mine.

I followed a Youtube Animation tutorial by DesignCourse. This -> is the link and this -> is the written tutorial. If you do decide to follow the written tutorial, the animation will not work unless you add an extra parent <div class=”inner>…</div> which contains the form. This tutorial was great and used the Popmotion library for its animations. Please follow tutorial as my walkthrough does not include everything, such as the entire CSS file and in-depth explanation.

1. HTML and CSS: Some basic HTML and CSS created for our animation demo.
2. Form: This form will appear on the webpage and most of our animation demonstration is going to be on the form. The form includes a Name input, Email Address input, an additional message, as well as a submit button which has no event listener and will do absolutely nothing for demonstration purposes. The Animation will be on the elements of the form even though the form is not functional.
3. Import Animation Library: This is where you will use a script to insert your Animation Library. I used Popmotion but there are many different libraries that you can choose from.
4. Element Locations: Right below our Animation Library script is the locations of our elements.
5. First Animation: Using the tween method, which allows you to animate between two states. In this example we are using scale to increase size of from from 70% to 100% as well as opacity to fade in and duration to set the timeframe that the animation will occur.
6. Second Animation: Writing each animation into its own individual variable allows us to animate multiple properties at once. Keyframes is another method which allows us to Animate through multiple sequential states with all the power of a single tween.
7. Stagger Animation: This animation will be targeting the children inside of the form. We first grab formElements, which includes individual elements that are inside the form, and create an array with those elements. Then create a spring animation for each element in the array using .fill(). Then use .stagger() animation passing in an array animations and number 100 which is the time between each animation. Then uses forEach method to run logic on each element in the array.
8. Animation Demo: 23:51