CODEWITHSUNDEEP
htmlcssgsap
db ash
db ash

Reputation: 25

GSAP animation start time

I am doing animation using GSAP. I am animating two boxes Pink box and Blue box. First start after 2s. I want blue box animation start at the top center viewport point. But both animation is happening as soon as page loads. Do i need to use timeline for it to happen? I want blue box to start animation after entering it's center point.I am new to GSAP. Please help to understand. Below is the 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>

Upvotes: 1

Views: 1127

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

For box with class .blue, add the same behavior parameters as for box with class .pink:

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

Also, but call scrollTrigger to trigger the above parameters when scrolling to box with class .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>

Upvotes: 2

Related Questions