02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoPrevious Video

Controlling animation progress

We created many GSAP tweens (TweenLite and TweenMax) in LEVEL 2.Once we created a tween, it was the end of our relationship with that animation. This is where our advanced training comes to play; it's about interacting with animations. In this lesson we are going to create a simple animation scrubber that will deepen our control over animations.

Creating a Scrubber

this whole course is dedicated to manipulating existing animations. In this first chapter working to create a scrubber that will control our animations. So let's get to it.

00:44

Getting to know our source file structure

this lecture is for students joining us now. If you know how to get along with our source files skip right to the next lecture.

02:48

Setting up the CSS of our project

This lesson is dedicated for a CSS rehearsal, as we setup and configure our project.

09:26

Let the animations begin

In this lesson, we will create a very smooth modern animation for images.

13:11

Controlling animation progress

In this lesson we are going to create a scrubber there will help us both see what position are we in our animation but also help us control the animation.

20:16

Changing function scope with jQuery.proxy

We know that functions that are owned by an object are called methods. This is not a technicality of naming methods have owners and their owners are objects.

05:37

Creating a toggle controller

Our goal is to pause and play our animation when it's clicked on. So let's get started.

10:26

Restarting TweenLite animation

For now let's return to our animation and restart it.

04:15