Blog
Select Page

ScrollTrigger – Timeline – GSAP

GSAP

Checkout the following demo for timeline that executes animation one after the another seamlessly.

DEMO – open in a new tab

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GSAP ScrollTrigger</title>
    <link rel="stylesheet" href="./assets/css/style.css?v=1">
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2">
      <div class="square"></div>
      <div class="square2"></div>
    </div>
    <div class="div3">
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
    <script type="text/javascript" src="./assets/js/script.js?v=1"></script>
    
  </body>
</html>

JS

gsap.registerPlugin(ScrollTrigger);


const tl = gsap.timeline({
    scrollTrigger: {
        trigger: ".square2", 
        start: "top 60%",
        end: "top 30%",
        markers: {
            startColor: "green",
            endColor: "red",
            fontSize: "1rem",
        },
        toggleClass: 'red',
        toggleActions: 'restart reverse restart reverse',
        pin: '.square',
        pinSpacing: true,
    }  
})

tl.to(".square", {x: 500, duration: 2})
  .to(".square", {y: 200, duration: 2})
  .to(".square", {x: 0, duration: 2})

CSS

body{
  margin:0;
}

.div1 {
  background-color: pink;
  height: 100vh;
}

.div2{
  background-color: salmon;
  height: 100vh;
}

.div3{
  background-color: rgb(61, 203, 90);
  height: 100vh;
}


.square{
  width: 150px;
  height: 150px;
  background-color: fuchsia;
}

.red{
  background-color: red;
}

.square2{
  width: 150px;
  height: 150px;
  background-color: rgb(190, 226, 83);
}