GSAP动画开始时间

Question

我正在使用 GSAP 制作动画。我正在为两个盒子制作动画，粉色盒子和蓝色盒子。 2s 后首先启动。我希望蓝框动画从顶部中心视口点开始。但是这两种动画都是在页面加载后立即发生的。我需要使用时间线来实现它吗？我希望蓝色框在进入其中心后开始动画 point.I 我是 GSAP 的新手。请帮忙理解。下面是 Codepen link。 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

对于 class .blue 的框，添加与 class .pink 的框相同的行为参数：

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

同样，但是当滚动到 class 框时调用 scrollTrigger 触发上述参数 .blue:

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>

GSAP动画开始时间

GSAP animation start time

html

css

gsap