How can I set the start and duration of animation with ScrollTrigger (scrubbing enabled)?

Question

I just started learning GSAP and have a problem setting the desired start and duration of the animation when scrubbing from ScrollTrigger is enabled.

First, here is a link to the codepen project.

Here is a demo of how the animation should look like:

.fixed{
    position: fixed;
}

.absolute{
    position: absolute;
}

.centered{
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.text-center{
    text-align: center;
}

#title{
  font-size: 6rem;
  animation: demo_h1 2s linear forwards;
}

.slideUp{
    font-size: 3rem;
    text-align: center;
    animation: demo_h2 2s linear forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes demo_h1{
  to{
    top: -130px;
  }
}

@keyframes demo_h2{
  50%{
    opacity: 1;
    top: 40%;
  }
  100%{
    opacity: 0;
    top: 30%;
  }
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1 id="title" class="centered absolute">Header1</h1>
    <h3 class="slideUp centered fixed">Header2</h3>
</body>
</html>

The only difference is, that I want the animation to be controlled by the scroll position.

What I want to achieve is basically a dynamic and interactive website, so when the user scrolls the elements animate (fade in, move, etc.). Thats why I am using the plugin ScrollTrigger.

I am using a timeline, to which I want to add all animations of the page. Therefore that timeline's start is the top of the page, and the end is set far down to 10000vh (see codepen for clarification). However, I dont want the first animation in the timeline to animate on the first scroll, I need some delay.

Since scrolling controls the state of the animation and not the time, delay and duration apparently behave quite differently. The start and end values are also somehow different when the animated element has a fixed position.

How can I add an delay to the first animation in the timeline and also set its duration? Is that somehow possible with px or vh?

How can I set the start and duration of animation with ScrollTrigger (scrubbing enabled)?

0 Answers0