GSAP ScrollTrigger – Pin

Puneet Sharma

2 years ago

In this demo the block gets pinned to viewport on page scroll to bottom. Have a look at the code also.

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>ScrollTrigger Pin - GSAP</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);

gsap.to(".square", {
    x: 700,
    duration: 3,
    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,
        // onEnter onLeave onEnterBack onLeaveBack
    }   
})

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);
}