gsap

gsap test

by avneedu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<div class="row small-up-3 ">

  <div class="column column-block" id="box">
    <img src="https://placehold.it/150x150" class="thumbnail" alt="">
  </div>
  
  <div class="column column-block" id="green">
    <img src="https://placehold.it/150x150" class="thumbnail" alt="">
  </div>
  
</div>

JavaScript

TweenMax.set("#box", {x:100, y:50, opacity:0});
TweenMax.fromTo("#box", 3, {x:0, y:0, opacity:0.5}, {x:200, y:100, opacity:1});
TweenMax.to("#green", 3, {rotation:360, scale:0.5, opacity:0.3});