Depot43-Unterlagen - TweenLite Responsiv

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://depot43.ch/unterlagen/themes/greensock/javascript/gsap/TweenLite.js"></script>  <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/easing/EasePack.js"></script> <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
    body {
        background-color: #ccc;
        min-height:1000px;
        background-color:#EF2E3E;
        margin:0;
    }
    div.containerrow {
        position:fixed;
        display:grid;
        grid-template-columns: auto auto auto auto;
        width:100%;
        height:100vh;
    }
    #box1, #box2, #box3, #box4 {
        width:1;
        border:1px solid grey;
    }

    #icon {
        position: absolute;
        width:100px;
        left:50%;
        right:50%;
    }
    #icon img {
        width:100px;
    }
    div.steuerung {
        position:relative;
        top:150px;
    }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
    <div class="containerrow">
        <div id="box1">Spalte 1</div>
        <div id="box2">Spalte 2</div>
        <div id="box3">Spalte 3</div>
        <div id="box3">Spalte 4</div>
    </div>
    <div id="icon">
        <img class="myPic" src="http://depot43.ch/unterlagen/assets/greensock/1.jpg" alt="Sisikon">
    </div>
    <div class="steuerung">
        <button onclick="myTween.restart()">Starten</button>
        <button onclick="myTween.paused(true)">Stopp</button>
        <button onclick="myTween.resume()">Weiter</button>
        <button onclick="myTween.reverse()">Zurück</button>
    </div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
      var icon = document.getElementById("icon");
	
	var myTween = new TweenLite.fromTo(icon, 4, {left:"50%"}, {left: "-=25%", ease:Bounce.easeOut });
  
  </script>
</body>
</html>




            

Hinweis

Wenn Werte als Strings und mit einem vorangestelltem "+ =" oder "- =" übergeben werden, wird die Animation relativ zur aktuellen Position ausgeführt.

Relative Werte

Der Tween wird von der mit HTML/CSS festegelegten Position ausgeführt:
Beispiel 1 wird um 50Px nach links bewegt,
Beispiel 2 wird um 33Px nach rechts bewegt

TweenLite.to (myTween, 2, {links: "- = 50px"});

TweenLite.to (myTween, 2, {links: "+ = 33px"});

Dynamische Werte

Wird das animierte Objekt mit CSS in %-Werten platziert. Können auch die im Script angegeben Werte in % geschrieben werden.

TweenLite.fromTo(myTween, 4, {left:"50%"}, {left: "-=25%"});

GSAP - TweenLite Responsiv

Hinweis