DigtalBloomStudio

GSAP

top画像
Menu

GSAP使い方
GSAP公式URL

こんなWebサイトを制作するのみ役立つ
「演出のこだわり」「見て触って気持ちいWebサイト制作」「自由な動きを作りたい」

GSAP 完全アニメーションデモURL

アニメーションをまとめたよ

GSAP使い方

GSAP 
  
  <div class="gaap-div">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  CSS
  .gaap-div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }
  .box1, .box1, .box2 {
    width: 100px;
    height: 100px;
    display: block;
  }
  .box1 {
    background-color: #ff6b6b;
  }
  .box2 {
    background-color: #4ecdc4;
  }
  .box3 {
    background-color: #45b7d1;
  }

  javascript

    動かしたいクラス名、ID名を指定（.box）
  gsap.to(".box1", {rotation: 360, x: 100, duration: 1});

  gsap.from(".box2", {rotation: -360, x: -50, duration: 5});

  gsap.fromTo(".box3", {x: -100},{rotation: 720, x: 200, duration: 8});
Top