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

Tweens in Timelines

In this chapter we take a deeper dive into the world of timelines and create a timeline of her own with multiple animations.

Duration: 01:14:12

Created with

Ben Fhala

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

Tweens in Timelines Overview

What you'll learn

In the last chapter we had our first experience of working with tweens is something that's in the timeline. In other words we control deposition as we created a scrubber. In this chapter we take a deeper dive into the world of timelines and create a timeline of her own with multiple animations. every single animation has a timeline if we control it or not. Once we integrate the TimelineLite we gain full control over the timeline. But first things first, We need to see how to add animations into a timeline. As such the first step is to create a new timeline and then add animations into it .

Timelines

In this chapter we take a step deeper into timelines as we use TimelineLite.

00:44

Frames, seconds and FPS

In this lesson, we will understand the relationship between time frames - FPS.

08:35

Controlling a timeline with TimelineLite

In this lesson we will create our first timeline and add three animations to it.

06:08

Defining tween position in TimelineLite

In this lecture we're going to learn about controlling the position of a tween in a timeline.

08:13

Creating a timeline scrubber

In this lecture we will redo our scrubber code and make it work with our timeline.

07:03

Do you control time?

In this lecture we will take control over time as as we explore the time and totalDuration methods.

10:56

Exploring all callbacks

In this lesson we will explore all the callbacks available in TimelineLite.

07:49

Adding and removing callbacks

In this lesson we will use the eventCallback method to add and remove callbacks.

07:24

Aligning tweens in TimelineLite

By the end of this lesson you'll know all of the strategies of aligning Tweens into the timeline.

10:11

Staggering animations in TimelineLite

In this lesson we complete our talk about the add method and see how to integrate staggering into animations.

07:07
Download Source Files