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

Adding labels

In essence, a label is a name associated to a point in time in a timeline. That name can then be used to interact with that point in time. In the process of creating a label, we will visit some HTML5 features as we create an editable text layer on our HTML page(with the editablecontent parameter). We will take a deeper look into the idea of chaining methods, exploring how it's done in jQuery. Chained methods are available in TimelineLite/TimelineMax of GSAP as well. We will explore how to use anonymous functions and many other small tips. In this lesson, we will learn how to add labels into a timeline and how to jump to that point in time using the label.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Running out of Time

We will learn about labels and how to work with them, we will completely solidify the concepts of time in the time line, we will tween timelines and nest them.

00:46

Adding labels

In this lesson we will learn how to add labels into our timeline and how to jump to them whenever we want to.

11:09

Pausing and playing timelines

In this lesson, we will integrate a pause and play toggle functionality for our timeline editor.

03:16

Integrating pause points

In this lesson we will introduce the add pause method and its functionality in regards to timelines.

07:17

Moving into TimelineMax

In this lesson, we will meet our first TimelineMax method that will return the current label we are in (currentLabel).

07:07

Jumping back or forwards

In this lesson we will learn how to use the getLabelTime, getLabelBefore and getLabelAfter TimelineMax methods.

10:29

A tear in time and space

In this lesson we will get rid of duplicate labels as we fix our tear in time and space.

11:30

Next: back to the back

In this lesson, we go back and improve the functionality of both the back and next buttons.

13:54

Tweening timelines

In this lesson we will fast forward and fast backwards the point in time we want to be giving control to the timeline to a simple little TweenLite.

04:49

Nesting timelines

In this lesson we will nest a timeline inside of another timeline.

10:47

What does time actually mean?

In this lesson we will travel through and understand the differences between the time methods of GSAP timelines.

15:17

Goodbye For now

Thanks for watching!

01:17