设置为

返回值：self​

self（便于链式调用）

细节​

添加一个gsap.to()补间动画到时间轴的末尾（或者使用position参数) —— 这是一个便捷方法，其完成的功能与add( gsap.to(...) )完全相同，但代码更少。例如：

var tl = gsap.timeline();

var tween = gsap.to(element, { duration: 1, x: 100, opacity: 0.5 });
tl.add(tween);

//this line produces the same result as the previous two lines (just shorter)
tl.to(element, { duration: 1, x: 100, opacity: 0.5 });

参考gsap.to() 文档获取所有关于to()补间动画（Tween）

可用的详细信息和特殊属性。from(), call(), set()等快速构建序列：

//create a timeline that calls myFunction() when it completes
var tl = gsap.timeline({ onComplete: myFunction });

//now we'll use chaining, but break each step onto a different line for readability...

//tween element's x from -100
tl.from(element, { duration: 1, x: -100 })

  //then tween element's y to 50
  .to(element, { duration: 1, y: 50 })

  //then set element's opacity to 0.5 immediately
  .set(element, { opacity: 0 })

  //then call otherFunction()
  .call(otherFunction)

  //finally tween the rotation of all elements with the class "myClass" to 45 and stagger the start times by 0.25 seconds
  .to(".myClass", { duration: 1.5, rotation: 45, stagger: 0.25 });

在时间线中定位动画​

默认情况下，动画会被添加到end时间轴的末尾，以便它们依次一个接一个地播放，但你可以使用position参数请务必阅读vars来精确控制各个元素的位置。它通常跟在

• 绝对时间（以秒为单位）从时间轴起点开始测量，作为数值比如3

  // insert exactly 3 seconds from the start of the timeline
  tl.to(".class", { x: 100 }, 3);
  

• 标签，例如"someLabel". 如果标签不存在，它将被添加到时间轴的结尾。

  // insert at the "someLabel" label
  tl.to(".class", { x: 100 }, "someLabel");
  

• "<"这个start前一个动画的结束位置**。可以将其想象成对<作为一个指向之前动画起点的指针。

  // insert at the START of the  previous animation
  tl.to(".class", { x: 100 }, "<");
  

• ">"- 变量end前一个动画的起始位置**。可以将其想象成对>作为一个指向之前动画结束位置的指针。

  // insert at the END of the previous animation
  tl.to(".class", { x: 100 }, ">");
  

• 一个复杂的字符串，其中"+="和"-="前缀表示relative值。当数字紧跟在"<"或者">"后面时，会解释为相对值，所以"<2"等同于"<+=2".示例：

  • "+=1"- 时间轴结束位置之后的1秒（产生空隙）
  • "-=1"- 时间轴结束位置之前的1秒（重叠）
  • "myLabel+=2"- 标签之后的2秒"myLabel"
  • "<+=3"- 前一个动画起点之后的3秒
  • "<3"- 等同于"<+=3"（见上方）("+="在紧随"<"或者">")
  • ">-0.5"- 前一个动画结束前的0.5秒。相当于说"前一个动画的结束加上-0.5"

• 基于百分比的复杂字符串。当紧跟着"+="或者"-="前缀时，该百分比基于的是总持续时间的正在被插入的动画。如果紧接着的是"<"或者">"，则百分比基于的是总持续时间的前一个动画. 注意：总持续时间包括重复/往返效果。示例：

  • "-=25%"- 与时间轴末端重叠，重叠时间为插入动画总持续时间的25%
  • "+=50%"- 超出时间轴末端，超出时间为插入动画总持续时间的50%，形成间隙
  • "<25%"- 前一个动画开始后的25%处。等价于">-75%"即从前一个动画的结束位置向前的-75%end前一个动画的结束位置**。
  • "<+=25%"- 插入动画总持续时间的25%后从前一个动画的起始位置开始。不同于"<25%"，其百分比基于的是前一个动画的总持续时间，而任何紧跟在"+="或者"-="后的内容都基于插入动画的总持续时间。
  • "myLabel+=30%"- 插入动画总持续时间的30%后从标签位置开始"myLabel".

*基于百分比的值是在GSAP 3.7.0版本中加入的
**“前一个动画”指的是最近插入的动画，不一定是离时间轴末尾最近的那个动画。

位置参数交互式演示​

参数之后，并使用以下选项中的灵活语法：位置参数文章其中包括交互式时间轴可视化展示和视频。