Clipping images
In the last chapter we discovered TimelineLite, and in many ways, focused exclusively on the TimelineLite.add method. In this chapter, we take a deeper dive into the world of timelines. We'll explore the various ways of adding animations into a timeline, from creating the animations and sending them to a timeline, through using the timeline methods to create tweens. In this lesson, we will set up our JavaScript stage by adding eight images of Bella the dog and cropping them to partially show. We will use the CSS clip property.
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