Let's go with another post about one of my favourite friends in the JavaScript family: TweenMax.

When I'm coding animations on web-apps, the most important goal of my job is try to give the more smoothness I can to the composition. Like I said in the previous posts of the TweenMax tips saga, GSAP is for sure one of the most helpful tool out of here.

Today I want to talk about a beautiful class offered by it: TimelineMax, the big brother of TimelineLite, the basic class for animated timelines. In simple words, a container for your tweens.

Like explained on the official website:

TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or Timelinemax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time.

TimelineMax extends TimelineLite with some helpful add-on and I think it can be very useful for your projects.

Everything start from a simple new TimelineMax instruction to create a new class instance. After this, we can add tweens to our timeline.

// create a new timeline instance
var myTimeline = new TimelineMax();

// add some tweens
myTimeline.to(myObjectA, 1.5, { x: -20, opacity: .8}, 0);  
myTimeline.to(myObjectB, 1, { y: 25, width: 250, ease: Circ.easeInOut}, 0);  
myTimeline.to(myObjectC, 1, { opacity: 0, ease: Linear.easeNone }, .5);  
myTimeline.to(myObjectD, 1, { opacity: 0, ease: Linear.easeNone }, "-=0.5");  
myTimeline.to(myObjectE, 1, { height: 550 });  

Let's comment our code:

• The first line, as explained before, create a new instance of our TimelineMax class;
• The second and the third lines declare two .to() tweens on particular objects, with a specific time, a set of properties and a delay time from the timeline starting point. It's 0, so those tweens start together and immediately when the timeline starts. This is called position parameter;
• The fourth line declare a .to() tween like the two before with the difference on the position time. It's 0.5 so this tween starts 0.5 after the timeline start (absolute position);
• The fifth line declare a .to() tween like the previous one with the difference on the position time. It's "-=0.5" so this tween starts 0.5s before the previous tween end (relative position);
• The last line is like the previous ones but haven't a delay time so it runs when the previous tween is finished.

As you can see, create simple animations with a timeline approach is very simple using GSAP. This is only the starting point of the TimelineMax class, so check out the full docs link at the start of the post to discover more.

Hope you enjoyed this topic. For any question or integration, please drop a comment below. Cheers!