02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
CoursesArchiveBooks
Get Free Access

Tweens of Timelines

By the end of this chapter you will know all the common ways of adding tweens and creating tweens for a timeline.

Duration:

01:19:16

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 of Timelines Overview

What you'll learn

In our last chapter we were introduced to timelines. We got her feet wet at adding animations to a timeline in this chapter Will continue that trend and get way deeper into the world of timelines. Our focus is still on the process of adding tweens into the timeline as we explore a plethora of methods that enable us to do that. By the end of this chapter you will know all the common ways of adding tweens and creating tweens for a timeline.

Adding tweens

By the end of this lesson you will know all the ways to stack animations, Functions, property changes in a timeline.

00:44

Clipping images

In this lesson we will set up our JavaScript stage by adding eight images of Bella the dog and cropping each Image to show only a partial Area of the image using CSS clip property.

16:14

From and to the timeline

In this lesson we will explore the to, from,toFrom methods of the TimeineLite library.

07:50

Setting properties

In this lesson we will discover set method of GSAP timelines.

06:30

Yes, I'm calling you

In this lesson I will introduce to you the call method which enables you to trigger functions at specific points in your timeline.

09:13

Staggering functions

In this lesson we will learn how to work with the staggered functions to animate a pile of things together using the methods: staggerFrom, staggerTo & staggerFromTo.

07:52

Delaying without adding animations

In this lesson we will discover how to add delays without adding an animation using the call method.

04:31

The constructor data object

In this lesson we will connect the dots by taking a look at the data object properties that enable us to send in an array of tweens, stagger them and even changed their alignment like in the ad method

09:55

Making things look better

In this lesson we wrap-up the topic of adding animations into timelines.

16:26
Download Source Files