GSAP - StartEnd

Resourcen:

GSAP-min GSAP-ScrollTrigger

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

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;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div class="scrollplatz">Platz zum 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",
			  markers: true,
			  start: "top 80%",
			  end: "top 20%",
			   toggleActions: "restart pause reverse pause"
		  },
		  x:500,
		  duration:5
	  });
  
  </script>
</body>
</html>




            

Hinweis

Mit den sichtbaren Markierungen "markers:true" lässt sich der Bereich für die Animation anzeigen. Um Start- und End-Position des Animationsbereiches zu setzen können Parameter für Start und End in die ScrollTrigger-Funktion eingefügt werden.

start: "top 80%",
end: "top 20%"

Dabei steht "top" für die obere Kante des Browsers, "80%" für die vertikale Position für Start. Für End steht "top" für die obere Kante des Browsers, "20%" für die vertikale Position. Die Werte und Positionesbezeichnungen richten sich nach der Scroll-Richtung. Wenn wird von oben nach unten Scrollen, bewegt sich das Zielobjekt von unten nach oben, daher liegt Start unten, End oben.

Es können auch fixe Werte verwendet werden:

start: "top 200px",
end: "top 100px",

Dieser Wirkunsbereich ist 100 Pixel hoch. Die Animation ist zwischen 200px und 100px unter der Oberkante des Browsers.

Für Responsiv-Design eignen sich Werte die zum Browserfenster entsprechenden Angaben:

start: "top bottom",
end: "top center",

Die Animation startet wenn das Zielobjekt den unteren Browserrand überschreitet "top bottom" und endet wenn es die Mitte des Browserfensters erreicht hat "top center".