Depot43-Unterlagen - StartEnd (dynamisch)

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

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

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
         gsap.registerPlugin(ScrollTrigger);
       
       gsap.to(".a", {
           scrollTrigger: {
               trigger: ".a",
               start: "center center",
               end: () => "+=" + document.querySelector(".a").offsetHeight,
               markers: true,
               toggleActions: "restart pause reverse pause"
           },
           x:400,
           rotation:360,
           duration:3
       });
  
  </script>
</body>
</html>




            

Hinweis

Der Trigger für die Animation wird in der vertikalen Mitte des Browserfenster festgelegt.

start: "center center",

Der Start- und Endpunkt der Animation wird dynamisch auf die Höhe des animierten Objekts beschränkt. Dazu wird die Höhe des Elements ".a" abgefragt und mit "+=" hinzu konkatiniert.

end: () => "+=" + document.querySelector(".a").offsetHeight

Als Wert für "end:" wird eine namenlose Funktion eingesetzt und die Parameter direkt hinzugefügt.

Wird die Höhe der Box erhöht, wird auch der Bereich für den Animations-Trigger erhöht:

.box {

            height:150px;

        }

GSAP - StartEnd (dynamisch)

Hinweis