Framerの日本語ドキュメントが少ないので、
自身の使い方のスタディも兼ねて、
ページを作成してみたいと思います。
フレームのFillに画像を指定。組み込みのUnsplahを使用。
Design and publish modern sites at any scale with Framer’s web builder.
Framerとは
ローコード・ノーコードでWEBサイトを構築出来るWEBサービス、Webビルダーです。ベースにReactを採用しており、後述するオーバーライド機能やコードコンポーネント機能を使用する際にはReactのコードを記述することが可能です。日本ではframer-motionの方が有名かもしれませんが、同じFramerの製品になります。
Webflowのwikiによると競合として Squarespace、Framer、Weebly、Wix.comなどがある。とのことなので、WebflowやWixと同じジャンルになります。
詳しくは公式サイトをご覧ください。
日本語は有りませんが、機械翻訳でも十分に内容は理解出来るかと思います。
機能についてもブログ形式のフィーチャー、リソースのアップデート/ブログを読むとなんとなく理解できるかと思います。
公式サイト
グリッドレイアウトのサンプル
CSSのdisplay: gridに相当します。
Desktop: Horizontal
MaxWidth: 900px
Tablet: Grid 2row
Mobile: Vertical
レスポンシブのサンプル
Fit文字を使用したタイトルと、Stack（flex）を使用したレイアウトの各ブレークポイントでの変化を指定しています。
画面をリサイズして確認してみて下さい。
Progress
Scroll Transformを使ったスクロール量のプログレスバーです。
スクロール量はid（#name）を付けたブロックが通過する量になります。
なぜかFramerのTransformはScaleをx&yのみの指定になるので、上記は少しややこしい組み方をしています。
Animation
Scroll Animationは位置にスクロールが来たときに、指定した表示アニメーションが実行されます。表示・非表示または表示のみを指定できます。
Direction
スクロール方向をきっかけとしてモーションを行うことが出来ます。
よくあるスクロール方向で出たり消えたりするヘッダーバーがイメージしやすいかと思います。
more content soon.
他のいろいろな機能についても少しずつ追加していこうと考えています。