Blog
Select Page

GSAP ScrollTrigger – Setting Scrub, Start and End Points

GSAP

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>
    <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: ".square", 
        start: "top 60%",
        end: "bottom 30%",
        markers: true,
        scrub: true,
        toggleClass: 'red'
    }
})

CSS

body{
  margin:0;
}
.div1{
  height: 100vh;
}

.div2, .div3{
  height: 50vh;
}

.div1 {
  background-color: pink;
}

.div2{
  background-color: salmon;
}

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


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

.red{
  background-color: red;
}

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