ニュースは、Codepenの非常に人気のあるアニメーションライブラリであり、Web writ over over、GSAPが 現在、完全に自由に使用できます Webflowに獲得されたことのおかげで。

に感謝します webflow GSAPは今です 100％無料 などのすべてのボーナスプラグインを含みます splittext、 morphsvg、およびクラブGSAPメンバーが独占的に利用できる他のすべて。そうです – GSAPツールセット全体が無料で、 商業用でも！ otこの詳細については、詳細をご覧ください Webflowのブログ

いいね。

お祝いでは、彼らもそうです コミュニティチャレンジを実行します あなたが物を作ってそれを提出し、多分いくつかの盗品を獲得する場所。あなたはWebflowまたはCodepenで提出する何かを作り、彼らは クイックペンテンプレートを提供します 始めるために。

そのテンプレートでわかるように、GSAPは通常のol ‘HTMLコンテンツをアニメーション化するのに優れています。 文章 個々の要素に分割されるコンテンツ（アクセスしやすい！）で、最新のものが完全に書き直されたもので、より良くなりました Splittextプラグイン。しかし、GSAPはアニメーション化できます…何でも。私は実際にそれをSVGのアニメーションに特に得意だと考えているので、最近目を引いた甘いSVGリンクを見て、ここで残りの時間を一緒に過ごすべきだと思います。

  • FigmaのSVGエクスポートをアニメーション化します Nanda Syahrasyadによる – ナンダが行うこれらのインタラクティブな投稿は驚くべきものです。それは本当にFigmaとは何の関係もありませんが、それはこれを必要とする種類の開発者とつながるのに役立つので、それは賢いタイトルです。これは、最後のデモが少し依存しているので、GSAPを少し考えさせました transform-origin GSAPは、クロスブラウザーを明示的に修正します（または少なくともそれ 使用済み 大きな固着ポイントになるために、それは滑らかになりました）。
  • svg-gobbler Ross Moodyによる – 上記のように、設計ツールからSVGをエクスポートすることは、必要なSVGを取得する1つの方法です。もう1つは、既存のサイトからキピングすることです！ウェブ上にはすでに多くのSVGがあります。このブラウザ拡張機能は、それらをきれいに抽出するのに役立ちます。
  • SVGコーディングの例：手作業でベクターを書くための便利なレシピ Myriam Frisano – 必要なSVGを手に入れるもう1つの方法は、袖をロールアップして書くことです。これは、SVG構文で完全に可能なことです。このガイドは使用しません それはそれ自体が全部であるので、意図的に 文書化 そして持っている 一緒に遊んだ 限られたベースで）。 Myriamのガイドはこちら します JavaScriptを使用して物事を可変化し、すべてスマートで便利なものであるループやものを実行します。
  • 静的からインタラクティブへ：SVG図をあなたのウェブサイトでエキサイティングな体験に変えます ヴァネッサ・フィリス著 – フリッシュはかなりクールなツールのように見えます。私にとってヴァネッサによるこれらのデモ 画像マップデモ、実際には完全に素晴らしいSVGユースケースです。
  • CSSとJavaScriptを使用してSVG要素の色を変更する Kirupa Chinnathambi著 – ここではSVG 101だけです。これは常に感謝されています。
  • VectorPea Ivan Kutskir著 – Webベースのベクターエディター（ALA Illustrator、Pen Toolなど）は、私の限られた経験で多くのファイル形式を開き、非常にうまく機能します。
  • lissajous curve svgジェネレーター エヴァ・デッカーによって – とてもニッチ。
  • svgfm Chris Kirknielsenによる – SVGフィルターは非常に強力であり、私はいつも少し不可解だと感じています。クリスは、いくつかの言語とUIをパーティーにもたらし、実験と遊びが少し簡単になります。しかし、それはまだ複雑です！
  • SVGフィルターの再訪 – デュオトーン、騒音、その他の効果のための私の忘れられた大国 Brecht de Ruyte – 私のお気に入りのSVGフィルターは、1つの明確な目的と1つのフィルターを持つものです。デュートーンの画像はそれです。
  • データURIのSVGをエンコードすることに関する真実（TM） Stoyan Stefanov著 – CSSでSVGをバックグラウンドとして使用する場合、できます。 background: url('data:image/svg+xml,'); そして、私はそれを文字通りと意味します。あなたは置くことができます 何でも そこにはSVG構文があり、一般的に予想どおりに機能します。スクリプトなどはありません。あるだけです 1つ 心配すること：任意のエンコード # キャラクターとして %23。