GSAP动画开始时间

Question

我正在使用GSAP制作动画。我正在制作两个盒子的动画粉红色的盒子和蓝色的盒子。2秒后首次启动。我希望蓝框动画从顶部中心视口点开始。但这两个动画都是在页面加载后立即发生的。我需要使用时间线吗？我希望蓝色方框在输入其中心点后开始动画。我是GSAP的新手。请帮忙理解。下面是Codepen链接。https://codepen.io/Ashleshadb/pen/QWpPdbK

gsap.registerPlugin(ScrollTrigger);
gsap.from(".pink", {
x: -300,
duration: 2,
delay: 2,
opacity: 0,
});
gsap.from(".blue", {
opacity: 0,
duration: 3,
x: -400,
ScrollTrigger: {
trigger: ".blue",
start: "top center",
end: "bottom",
},
});

.redBorder {
border: 2px solid red;
padding: 4em;
height: 100vh;
margin-bottom: 3em;
}
.pink {
background-color: pink;
padding: 2em;
height: 100px;
width: 100px;
}
.greenBorder {
border: 2px solid green;
padding: 4em;
height: 100vh;
margin-bottom: 3em;
}
.blue {
background-color: blue;
padding: 2em;
height: 100px;
width: 100px;
}

<div class="redBorder">
<div class="pink">Red Box</div>
</div>
<div class="greenBorder">
<div class="blue">Blue Box</div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>

Answer 1

对于.blue类的盒子，添加与.pink类的盒子相同的行为参数：

gsap.from(".blue", {
x: -300,
duration: 2,
opacity: 0,
...

此外，当滚动到具有类.blue:的框时，调用scrollTrigger以触发上述参数

scrollTrigger: {
trigger: ".blue"
}

gsap.registerPlugin(ScrollTrigger);
gsap.from(".pink", {
x: -300,
duration: 2,
opacity: 0,
});
gsap.from(".blue", {
x: -300,
duration: 2,
opacity: 0,
scrollTrigger: {
trigger: ".blue"
},
});

.redBorder {
border: 2px solid red;
padding: 4em;
height: 100vh;
margin-bottom: 3em;
}
.pink {
background-color: pink;
padding: 2em;
height: 100px;
width: 100px;
}
.greenBorder {
border: 2px solid green;
padding: 4em;
height: 100vh;
margin-bottom: 3em;
}
.blue {
background-color: blue;
padding: 2em;
height: 100px;
width: 100px;
}

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<div class="redBorder">
<div class="pink">Red Box</div>
</div>
<div class="greenBorder">
<div class="blue">Blue Box</div>
</div>