In this lesson I’ll show you how to add labels to a timeline. Once a label is added we can then use them for navigation.
Watch the Video
Explore the Demo
Here are some helpful ways to use labels
Start playing at a label
timeline.play("myLabel")
Scrub the playhead to a label
timeline.tweenTo("myLabel")
Scrub the playhead between 2 labels
timeline.tweenFromTo("myLabel", "myOtherLabel")
Additional Notes
I always suggest reading the official documentation as there is often plenty of additional info I just can’t cover in a short video or perhaps just doesn’t pertain to what I’m doing. For instance, addPause() allows you to assign a callback when it fires!
No more getLabelsArray() in GSAP 3
TimelineMax (GSAP 2) used to have a getLabelsArray() function which made it very easy to loop through the array and dynamically pull each label and its time. It also made it very easy to do things like get the first label or last label. The new labels object isn’t as friendly for looping. Fortunately GreenSock whipped up a handy helper function for us.
Code for getLabelsArray() helper function.
const getLabelsArray = timeline => Object.keys(timeline.labels).map(v => ({name: v, time: timeline.labels[v]})).sort((a,b) => a.time - b.time)
//USAGE
console.log(getLabelsArray(myTimeline)
If you’re curious about why getLabelsArray() was pulled from the API you can read the thread that discusses the reasons why GreenSock removed getLabelsArray() from the API.
Get Full Access to all my courses with a Creative Coding Club subscription
This lesson is already available as part of my course GSAP 3 Beyond the Basics. The course is packed with lessons just like this that contain a short video and easy-to-understand demo.
Join me in my mission to provide high-quality and affordable animation training resources to all.