在gsap.timeline()上使用如to()、from()或fromTo()等函式建立動畫,除了能利用數字定義開始的秒數之外,也可以使用標籤的方式指定,先在timeline中新增標籤,之後在於設定動畫的位置使用。
let myTimeLine = gsap.timeline();
//設定labels
myTimeLine.addLabel("myLabelOne", 3);
myTimeLine.addLabel("myLabelTwo", 5);
//使用於timeline上的動畫中
myTimeLine.to("#my-div-one", {backgroundColor:'purple', duration: 1},"myLabelOne");
myTimeLine.to("#my-div-two", {backgroundColor:'yellow', duration: 1},"myLabelTwo");
事先利用標籤的方式定義開始時間,讓動畫的安排統一在Label定義好,可以讓Timeline的動畫安排更加方便。
除了標籤之外,GSAP提供了兩個特殊的符號">"和"<",">"指的是接續上一個動畫開始,基本上就是以定義的先後順序為主,也就是程式碼的先後順序,而"<"則是相反,會在上一個開始之前,那如果上面的定義為">",而接續的則定義為"<"的話,兩個動畫則會同時開始囉!
let myTimeLine = gsap.timeline();
myTimeLine.to("#my-div-one",{backgroundColor:'purple', duration: 1},2);
myTimeLine.to("#my-div-two", {backgroundColor:'purple', duration: 1},">");