質問: こんにちは。 TweenMaxを使ってsvgを動かしたいと考えています。 公式のサンプルを参考に実行したところ、 TweenMaxによって`left: 300;`が動的に入ってはいるのですが、肝心な画像が動きません。 自力で ``` position: absolute; ``` を画像に指定してやると動くのですが、 そもそもこのライブラリはそのようなものを追加しなくても良いはず。@_@ どうすれば動くようになるのでしょう? 以下、ソースです。 ``` ``` ``` #pic { position: absolute;//これがないと動かない } ``` https://greensock.com/get-started-js#loading-gsap ちなみに、こちらの公式ムービーではさらっと実行できております。 謎は深まるばかり。。 有識者の方、どうかご教授ください!
回答: 簡単に見てみましたがそのような記述は見つかりませんでした。left があれば position を変更するなどの余計なことはしないでしょう。動画もCSS部分を見せていないのであらかじめ書かれていると思われます。 ドキュメントには > > When animating positional properties such as left and top, its imperative that the elements you are trying to move also have a css position value of absolute, relative or fixed. > > > (left や top などの位置プロパティをアニメーション化するときは、動かそうとしている要素が absolute、relative、または fixed の css position 値を持つ必要があります。) と書かれていますし、 > > Performance note: it's much easier for browsers to update x and y (transforms) rather than top and left which affect document flow. So to move something, we recommend animating x and y. > > > (パフォーマンスノート: ブラウザは、ドキュメントフローに影響を与える top や left よりも x や y (トランスフォーム)を更新するほうがより簡単です。何かを動かすには、x と y をアニメーション化することをお勧めします。) ともあります。