タグ別アーカイブ: GSAP

くっそこんなことに時間をッtweenmax scrollTo+iOS10のバグ

工数減らすために使ったのにバグあるなんてばくはつしろ!
と思ったのでメモ。

Is there a problem with the scrollTo plugin on iOS 10? – GSAP – GreenSock
https://greensock.com/forums/topic/15208-is-there-a-problem-with-the-scrollto-plugin-on-ios-10/

iOS 10 & ScrollToPlugin – GSAP – GreenSock
https://greensock.com/forums/topic/15108-ios-10-scrolltoplugin/

autoKill:falseを入れないと、iOS側の制御とダブって止められるそうな。ふえぇえええ!!!
TweenLite.to(window, 1, {scrollTo:{y:”#element”, autoKill:false}});

ScrollMagic v2.0.5の使い方

v1系とv2系で
アニメーション部分が分離されて、classっぽい書き方になったので
だいぶ違うみたい。メモ。

使い方

DLする

janpaepke/ScrollMagic
https://github.com/janpaepke/ScrollMagic

core:
/scrollmagic/minified/ScrollMagic.min.js

tweenMaxを使うなら必要なプラグイン:
/scrollmagic/minified/plugins/animation.gsap.min.js

読み込む

上記2つと必要ならjqueryも先頭で読み込む

記述する

1.全体を管理するコントローラーを用意する
2.各シーンのアニメーションや付けたいclassとスタイル等を準備する
3.各シーンとアニメーションを紐付け、コントローラーに登録する


var path0= [{x: -120 , y: -40 }, {x: -90 , y: -5 }, {x: -60 , y: 0}, {x: -30, y: 5}, {x: 0, y: 0}];
$(function(){
    var controller = new ScrollMagic.Controller(); //各シーンを管理する用の「コントローラー」、全体に1つ必要
    TweenLite.set($('#aboutTitle').find('img'), {opacity:0});
    TweenLite.set($('#scene2').find('.text1'), {opacity:0,y:30});

<pre><code>//各シーンのアニメーションを作る。(今回は複数繋げたいのでTimelineMaxを使用)
var tween2 = new TimelineMax()
            .set($('#aboutTitle').find('img'), {
              rotationY:'270deg', x:'-=120',y:'-=40',
              opacity:0,
              ease: Power2.easeOut
            })
            .staggerTo($('#aboutTitle').find('img'), 1.8, {
              rotationY:'0deg',
              opacity:1, ease: Power2.easeOut,
              transformOrigin:'50% 50%',
              bezier:{
                values: path0
                }
            },0.05).to($('#scene2').find('.text1'), .8, {
              opacity:1,
              y:0,
              ease: Power2.easeOut
            });

//「コントローラー」に登録する各シーンを登録する。
//アニメーションを付ける場合
var scene = new ScrollMagic.Scene({
                    triggerElement: "#scene2",//どこに来たら発火するのか
                    reverse:false //逆戻りの時の効果はなし(今回は)
                    // duration: 400, //スクロールにあわせてアニメーション変化するときは変化の範囲(スクロール量)を指定
                    // triggerHook: 'onEnter', //発火のトリガーを変更する場合は'onEnter'や'onLeave'などの文字列を渡す
                })
                .setTween(tween2) // トリガーが引かれた時のアニメーションを登録する
                .addIndicators() // add indicators (requires plugin)
                .addTo(controller);

//要素を固定する場合
// var scene = new ScrollMagic.Scene({
//                  triggerElement: "#jsTitleArea2",
//                  // duration: 400,//pin する距離を数値で指定する場合
//                  triggerHook: 'onLeave',//pin するタイミングをフレームのどこにきたタイミングかで指定する場合
//              })
//              .setPin("#jsTitleArea2")
//              .addIndicators({name: "setPin Title2"}) // add indicators (requires plugin)
//              .addTo(controller);
</code></pre>

});

またあとでわからなくなりそうなまとめだ。。。うーん。

docs

ScrollMagic Documentation
http://janpaepke.github.io/ScrollMagic/docs/index.html

最初の一回だけ(順方向へのスクロールの場合だけ)アニメーションさせたい場合はreverse:false
Animate only on FORWARD · Issue #71 · janpaepke/ScrollMagic
https://github.com/janpaepke/ScrollMagic/issues/71

GSAP TweenMax で staggerTo の 全てが終わった時のonCompleteコールバックを使う

onCompleteAllとかあるのかとおもったらちゃうかった。
一番最後にファンクション名をくっつけるだけ。

TweenMax.staggerTo($(gloup2.node).find('circle'),.5,{
  x:0,
  y:0,
  scale:.1,
  transformOrigin:"50% 50%",
  },.1,delateAll
);
function delateAll(){
  gloup2.remove();
}

TweenMax.staggerTo. onCompleteAll callback doesn’t work – GSAP – GreenSock
http://greensock.com/forums/topic/10493-tweenmaxstaggerto-oncompleteall-callback-doesnt-work/

TweenMax,TimelineLiteメモ

//全ての動きを削除
TweenMax.killTweensOf($("#bigDVD"));

//timelineLiteの合計時間を指定
var tt = myAnimation.totalTime(); //gets total time
myAnimation.totalTime(2); //sets total time, jumping to new value just like seek().

全ての動きを削除して初期状態に戻す(TweenMax)

Reset and and stop All Tweens (TweenMax and TimelineMax) – GSAP – GreenSock
http://greensock.com/forums/topic/8320-reset-and-and-stop-all-tweens-tweenmax-and-timelinemax/

     TweenMax.killTweensOf($('#image'));
     TweenMax.set($('#image'), {clearProps:"all"});

全ての動きを削除して初期状態に戻す(TimelineMax・TimelineLite)

Docs

    timeline.stop(); //止める
    timeline.time(0); //タイムライン開始時の状態に戻す
    timeline.kill(); //タイムラインを削除する

Ease params

GreenSock | Ease Visualizer

blog.EaseVisualizer

TimelineLite Docs

GreenSock | TimelineLite
http://greensock.com/timelinelite

GreenSock | Docs – HTML5 GSAP TimelineLite totalTime

Docs

## Velocity?GSAP?Transit?いろいろあるけどどれがいいのん。って話。 一年前くらいの記事だけど。 2015 10 14現在 Speed Test…

Velocity?GSAP?Transit?いろいろあるけどどれがいいのん。って話。

一年前くらいの記事だけど。(2015/10/14現在)

Speed Test: VelocityJS, GSAP, jQuery, and Transit

animation – 最近のJS&CSSアニメーションライブラリまとめ – Qiita
http://qiita.com/tejitak/items/de7fbed9bf22b9037526

CSS vs. JS Animation: Which is Faster?

CSS vs. JS Animation: Which is Faster?

Animating Without jQuery – Smashing Magazine
http://www.smashingmagazine.com/2014/09/animating-without-jquery/

べろちゃんの使い方の説明スライド
Velocity.js is next generation animation engine.

まとめる。

  • GSAPはお金が絡む商用では有料だよ(チケット売るとか、有料会員のみ閲覧できるとか
  • GSAPは色々出来るけど、108KB、ゲームとかの細かい動きや、タイムラインを弄りたい・遡りたいときに。
  • 単純にjqueryの置き換えとして使って軽量化させるならVelocity zip後の重さは7kbだそうな。
  • でも(GSAP本家曰く)まえより早くなってVelocityとかわりないくらい軽いよ(って言ってた)
  • 使いやすいのはVelocity アホみたいに色々出来るのはGSAP

バグとか

うーん。Velocity、AndroidでtransformOriginが効かない、、、、??なぜだ。

Set transform-origin on SVG elements · Issue #137 · julianshapiro/velocity
https://github.com/julianshapiro/velocity/issues/137

Added support for 3D CSS transforms for SVG elements (for all browsers
but IE and Android non-Chrome, where it’s not possible). Closes #137.
だって。。svgはちょっとむりぽってことか。。。くそ。。。

20時間ほどVelocity.jsをいじってみた – フロントエンド開発Blog | オレには鈍器がある 無料ゲーム公式サイト
http://oredon.kidukilab.com/blog/2015/01/20velocityjs.php

記述の仕方比較

あったあったよ賢い人がうまくまとめてくれてるページが。(小躍り)

jQuery, GSAP, Velocity.jsのfadeIn/fadeOutの記法を比べる – console.lealog();

SVGのアニメーションについて

SVGのアニメーションはdivとか他のものと違って、軸が常に左上になる

SVGアニメーションの現状 | プログラミング | POSTD

SVGアニメーションの現状

のだが、そこをvelocityだとちゃんと補完できないみたい
tweenMaxはできたんだが、。。

See the Pen stagger w/velocity, GSAP by Hiroko Nakahara (@hirokona) on CodePen.

SVGをもっとさくさくっと動かし鯛

各種ライブラリについて

アニメーション・svg描画準備系

animation – 最近のJS&CSSアニメーションライブラリまとめ – Qiita
http://qiita.com/tejitak/items/de7fbed9bf22b9037526#createjs

snap.svgとついーんめっこす(GSAP)で動かすてみますた。
svgのアニメーション系どれがいいのって話。(半世紀前に終わってそうですねすみません)
普通に動かすとカクカク重かったとです。
下記が実際に描いてみたコード

    //prepare for SVG animation
    function showSVG(){
        // t.svg1.flower.attr({ transform: 's0,0' });
        t.svg1.flower.attr({ 'path' : t.svg1.maxSize });
        $('#svgArea').css({'visibility':'visible'});
        //座標変更
        // t.svg1.flower.animate({ transform: 't100,100' }, 800, mina.bounce);
        //スケール(重い)
        // t.svg1.flower.animate({ transform: 's0,0' }, 800, mina.easeinout);
        // t.svg1.flower.animate({ transform: 's0,0' }, 800);
        //変形(重い→0からへんかさせるよりは軽くなった)
        // t.svg1.flower.animate({ path: t.svg1.minSize }, 600, mina.easeinout);
        TweenLite.to("#aaa", 1, {scale:0,transformOrigin:"50% 50%"});
        // TweenLite.to("#aaa", .6, {scale:0,transformOrigin:"50% 50%",ease: Power0.easeOut});
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed/2, t.loading.easing);
        // t.svg1.flower.animate({ 'r' : t.svg1.maxSize }, t.loading.speed, t.loading.easing);
        // $('#loadingImg').removeClass().addClass('chara'+(1+parseInt(Math.random()*4)));
        // $('#loadingInner').addClass('shown').show();
    }

・描画の快適さ
スケール動かす<pathを動かす
snap.svg<TweenMax<TweenLite

ただし

ついーんめっこすで動かすときはtransform-originに気をつける
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks

SVG Animation and CSS Transforms: A Complicated Love Story

TweenMax.to("#svg, #div", 2, {
  rotation:360, 
  transformOrigin:"50% 50%"
});

あと、GSAPではdashtray?点線のやつやfillの変更などの高度なSVG用プロパティは専用プラグイン(有料)がないといじれないらしい。
商用プランは年150$もします。。。。便利だけどね。超便利。

軽量化・圧縮

圧縮用。不要な記述やID、改行を削除するやつ〜〜
SVGOMG – SVGO’s Missing GUI
https://jakearchibald.github.io/svgomg/

ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」 | WWW WATCH
https://hyper-text.org/archives/2015/02/svgomg.shtml

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI | コリス

見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

ライブラリでのアニメーション

JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法 | 株式会社LIG
http://liginc.co.jp/web/js/other-js/168856

最近の文献よくわかんねぇよ!
Snap.svgはs0,0っていう指定がよくわからなくて途中泣きそうになったよ
Snap.svg Tutorial
http://svg.dabbles.info/snaptut-transform

svgの注意点

htmlの他の要素と違ってz-indexの概念がない。
描画順(or記述順)が重なり順。
変更するには
・DOMをいじっておく
・JSで記述位置を変更する(jqueryやsnap.svgのappend,prependで位置を変更する)
などの対応が必要

描画始点のポイント

描画の始点をどこにするかも重要。
例えば

<circle class="rectangles" cx="50%" cy="50%" r="24" stroke="red" />

とすれば中央が始点となるので、下記の場合は数値より便利。

  • xyを中央から画面外にフェイドアウトさせる
  • もしくは画面外から中央に集める
  • はたまたブラウザ中央からの位置で配置する

どのみち使い方による。