Depot43-Unterlagen - EndTrigger

Code Elemente - HTML - CSS - JS

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>GSAP - Greensock</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">


	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

 

  <!-- CSS *************************** -->
  <style>
        .box {
            margin:100px 0;
            width:50px;
            height:50px;
            display:flex;
            align-items: center;
            justify-content: center;
        }
        .scroll {
            height:200px;
        }
        
        /* Farben */
        .red {
            background-color: #cf3535;
        }
        .blue {
            background-color: #2c7ad2;
        }
        .orange {
            background-color: #e77614;
        }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
   <div class="box a red">a</div>
   <div class="box b blue">b</div>
   <div class="box c orange">c</div>
   <div class="scroll">- - - - -</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
         gsap.registerPlugin(ScrollTrigger);
       
       gsap.to(".b", {
           scrollTrigger: {
               trigger: ".a",
               start: "top 50px",
               endTrigger: ".c",
               end: "bottom 80%",
               markers: true,
               toggleActions: "restart pause reverse pause"
           },
           x:400,
           rotation:360,
           duration:3
       });
  
  </script>
</body>
</html>




            

Hinweis

Der Trigger für die Animation können auch durch die Objekte gesetzt werden. Im Beispiel werden für die Animation des Elements ".b", die Position des Elements ".a" als Startbedingung, die Position des Elements ".c" als Endbedingung verwendet.

Animiert wird ".b":

gsap.to(".b", {

getriggert wird ".a"

trigger: ".a",

als End-Trigger wird ".c" verwendet

endTrigger: ".c",

GSAP - EndTrigger

Hinweis