Depot43-Unterlagen - Greensock ScrollTrigger

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>
	  div {
		  width:50px;
		  height:50px;
		  margin-top:5px;
		  background-color:#ccc;
		  border:1px solid black;
		  display:flex;
		  text-align: center;
		  justify-content: center;
	  }
	  div.scrollplatz {
		  width:80%;
		  height: 500px;
                  background:none;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div class="scrollplatz">Runter scrollen</div>
	<div class="a"><p>Ziel</p></div>
	<div class="scrollplatz">Platz zum scrollen</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
  	gsap.registerPlugin(ScrollTrigger);
       
	gsap.to(".a", {
		scrollTrigger: {
			trigger: ".a",
			toggleActions: "restart none reverse none"
		  },
		  x:500,
		  duration:3
	  });
  
  </script>
</body>
</html>




            

Hinweis

Das Plugin ScrollTrigger aufrufen mit:

gsap.registerPlugin(ScrollTrigger);

Nun erfolgt direkt eine Animationsaufruf den wir bereits aus "TweenLite/TweenMax" kennen. Mit "gsap.to()" wird eine Animation erstellt. Das Animations-Objekt ".a" wird als Trigger angesprochen und mit "ToggleAction" das Verhalten festgelegt. Der x-Wert "x:500" (Horizontale Positionaveränderung) und "duration:3" (Dauer der Animation, 3 Sekunden)

scrollTrigger: {
            trigger: ".a",
            toggleActions: "restart none reverse none"
          },
          x:500,
          duration:3

GSAP - Greensock ScrollTrigger

Hinweis