Interface animation - course RUB 31,900. from Uprock, training 4 months, date November 28, 2023.

instagram viewer

THEORY

Introduction

In this lesson, you will get an idea of ​​what web animation is, what functions it performs in interface design, and in what cases it is used. You will learn what two types of animations are used on real websites. Get key tips on how to create fluid, effortless, and always relevant animation. You will learn which techniques are best not to use in realistic animations and why. We will analyze the basic animation actions and look at them with examples. Let's figure out what programs need to be installed for training and comfortable work. Where and how to register, which tariff plan to choose. You will receive two useful plugins - AEUX and Motion Tool, which allow you to optimize some key work processes in Adobe After Effects and greatly facilitate the process of creating animation, and get acquainted with the After program Effects.

• Introduction to Web Animation
• Theory
• Installing programs
• After Effects Interface and Setup

PRACTICE

Appearance Animation

In this lesson you will learn the most basic and popular animation - the appearance animation and the Opacity property. This practical tutorial is structured in such a way that you receive detailed instructions on how to create an appearance animation step by step. We'll talk about what rendering is and why it's needed. Let's look at the Track Matte function and its first property - Alpha Matte (alpha mask). As a result, you will gain the basic skill of working with the Opacity properties, Alpha Matte (alpha mask) and create a shot with a beautiful appearance animation.

PRACTICE

Complicated appearance scene

Let's look at a combination that consists of two animations: appearance (you're already familiar with it) and movement (this is a new type of animation for you). We will dwell on the latter in more detail. To animate movement, you will use the Position parameter, which determines the position of the object in the composition. You will also become familiar with the layer option Anchor Point and learn how to use it correctly. Ultimately, you'll animate a shot and learn how to create impressive animations from different types of animations.

PRACTICE

Working with Motion Tools

In the lesson you will study the Motion Tools script in detail. In practice, see how convenient this tool is. In fact, it significantly speeds up the work process. You'll gain a thorough understanding of what Velocity Graph is, Easing, how Bezier curves work in After Effects, and how they affect animation. Finally, you'll learn in detail how to customize your animation using Motion Tools, which will greatly optimize your animation experience.

• General concepts
• Motion Tools v2.0

PRACTICE

Zoom animation (using alpha mask)

You will learn how you can show animations of photos appearing. The key property you'll learn in this tutorial is the layer's Scale parameter. With its help you can change the size of an object. This animation is called a scaling animation (using Alpha Matte). We will scale the Alpha Matte itself (alpha mask) and the image inside it together with the appearance animation you have already studied. As a result, you will learn how to effectively animate photos.

PRACTICE

Parallax animation

You will gain a thorough understanding of how to apply one of the most popular effects - parallax. To implement it, you will need 3 design elements and the already familiar Position property. After creating the parallax effect, you'll figure out how to apply a reverse animation to make it loop. Finally, you'll learn how to create shots that use the parallax effect to create a sense of depth and dimension that leaves a powerful impression on viewers.

PRACTICE

Complex scene with parallax, motion and mask application

In this tutorial you will learn how to create complex animations that incorporate the animations you've learned in previous chapters. sprints, namely: Appearance - Opacity, Movement - Position, Scaling - Scale, application of Alpha Matte (alpha mask) and Effect parallax. A new type of animation for you will be the appearance of the title in the mask area. You'll learn how to create complex scenes with transitions using all of these animation types, which will help your shots stand out from the rest.

PRACTICE

Adaptive Animation

We will look at the concept of adaptive animation. This is the already familiar zoom animation that you will use to demonstrate responsive versions of the site, when the desktop layout smoothly transforms into a mobile phone layout. To create it, you will use previously learned properties, such as Movement – ​​Position, Scaling – Scale, Disappearance/Appearance – Opacity, Reverse Animation – Motion Tools 2/Clone. Knowing how to properly implement adaptive animation will allow you to effectively present your projects.

PRACTICE

Rotation animation

You will learn simple animation - rotations and the Rotation object property, which is responsible for rotating a layer around its anchor point. We will look at three Rotation parameters: the number of revolutions, the amount by which we want to rotate the element (in degrees), clockwise/counterclockwise rotation. After going through each of the repeating animation cycles step by step, you will eventually master the skill of working with the Rotation property and create a shot with a rotation animation that will attract the attention of viewers.

PRACTICE

Complex animation consisting of all the basic animations

Let's look at a more complex combination, which consists of all the basic animations you are familiar with. In this lesson we will touch on the topic of creating the effect of simulating a click on a picture using animation of scaling and disappearing of the circle (Ellipse Tool). As a result, you'll learn the sequence of different animations, allowing you to create more complex, impressive animations.

PRACTICE

Working with scenes

This lesson is a cycle that consists of 3 sprints. It focuses on alternative scene transitions. First, we will take a closer look at the concept of “scene” and discuss what transitions between scenes exist. You will learn how to use 3 non-standard options for changing scenes: mask changing, curtain changing and slide changing. To create a “mask change” transition, you will understand and learn how to work with the new Track Matte parameter – Alpha Inverted Matte or Inverted Alpha Mask. And learn how to import video into an animation composition.

PRACTICE

Color change animation

In this tutorial you will learn how to work with color animation and the Color layer property. A simple animation that can be used to demonstrate the hover of buttons or links. But we will look at a more interesting option, how you can beautifully present your project using color changing animation.

PRACTICE

Path Animation (Crop)

You will learn the new Trim Path parameter, which can be used to create very cool path movement effects, or in other words, path trimming effects. For example, when they want to show a preloader, a progress bar in a video player, etc.

PRACTICE

Complex animation

In this lesson you will again work with complex animation, consolidate previously acquired skills and create a shot animation with new effects using all the same basic animation properties: appearance, movement, mask, scaling, transition between scene 1 (mask change), transition between scene 2 (change curtain).

PRACTICE

Decorative text animation (glitch)

This lesson begins another small cycle, consisting of 3 lessons on decorative text animation. In this lesson you will learn how to make such an extraordinary effect as Glitch - the effect of a “broken” picture or television interference. This effect in animation looks quite fashionable and produces a wow effect. It is quite easy to create

PRACTICE

Decorative text animation (script)

In this lesson you will learn how to create an animation that simulates capital text. This technique is often used to place accents on a website and it looks quite aesthetically pleasing. For this animation you will use the new Pen Tool. Be prepared for hard work and be patient. As a result, you will get a beautiful animation that you can use to present your projects.

PRACTICE

Creative text animation

In this lesson you will again find text animation, but more creative and unusual. Its interesting effect involves a combination of different animations using two alpha masks - simple and inverse. As a result, you will create a cool shot, and you can use this method in your projects for effective presentations.

PRACTICE

Complex animation

In this tutorial we will use the types of animations that you are already familiar with, but we will use some of them to create more complex and non-standard effects. As a result, we get a complex, complex animation, which consists of three scenes with transitions, scrolling and slide changes.

PRACTICE

Animation using Luma Matte

In previous lessons we discussed the Track Matte parameters, and you already have a good idea of ​​the operating principle of Alpha Matte and Alpha Inverted Matte. In this tutorial we'll explore the following two Track Matte options: Luma Matte and Luma Inverted Matte and learn how to apply them to our projects.

PRACTICE

Animation using Turbulent Displace

Let's study animation using the photo distortion effect. Turbulent Displace is one of the tools of the Distort parameter. Technically, it is a slight shift of pixels that helps create a wave effect and is often used for the effect in photographs.

PRACTICE

Complex complex animation

The last training lesson, where we will create complex complex animation, using previously learned types of animations and a new one – the Text parameter and its “Source Text” property, which allows you to change the content of the text layer. An independent practical part, where you will come up with and create animation for your shot from scratch, as well as several interesting and useful bonus video lessons

PRACTICE

Creating animation from scratch

Determining the style, searching for references, creating a script. The principle of creating ideas for scenes and transitions between them, preparing the source code, creating animation of 1 scene, publishing the shot on the networks.

PRACTICE

Dribbble account management and promotion

Dribbble account management and promotion. Animation for presentations and Behance. Using animation from After Effects on the website.