GSAP ScrollTrigger plugin Animation on Scroll

Puneet Sharma

2 years ago

GSAP ScrollTrigger plugin Animation on Scroll

Hi there, this is my first GSAP’s ScrollTrigger Plugin animation that executes when user scroll down to a trigger i.e. when trigger is visible on the viewport.

I have colored the sections to make it look more understanding while animation is happening. So scroll down to check out the animation in the demo below and also check out the related code for the same.

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: ".div3"
})

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

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