エフェクトが動作しない時にチェックすべき項目

1. Scroll Variant設定の確認

まず、サイト内でScroll Variantエフェクトが‘Section in View’に設定されているか確認してください。このオプションを使用する場合、必ずセクション名が指定されていないとエフェクトが正常に動作しません。

セクション名がなければ、名前を追加した後、プロジェクトを再度Publishしてエフェクトが発動するか確認してください。

2. アクセシビリティ及びモーション軽減機能設定の確認

サイトの設定でアクセシビリティオプションを有効にして、ユーザーのデバイスでモーション軽減機能が有効の場合、効果は正常に動作しません。

つまり、ユーザーブラウザやデバイスで「prefer-reduced-motion」設定をオンにすると、意図した動作が制限され、不透明度にのみアニメーションが適用されることになります。

3. デバイスで低電力モードの確認

使用しているデバイスで低電力モードが有効になっていると、一部のアニメーションが無効化または制限されることがあります。この場合、デバイスで低電力モードを解除して再確認してください。

上記のチェック項目をすべて確認したにもかかわらず問題が続く場合、FramerのContactページを通じてサポートチームにお問い合わせいただければ助けを受けられます。

よくある質問(FAQ)

Q. 特定のセクションが画面に入る前にアニメーションを開始できる設定はありますか？

• はい。Scroll VariantのOffset値を調整することで、セクションが完全に表示される前にアニメーションを開始するように設定できます。

Q. コンポーネント内にあるセクションでもSection in Viewトリガーを使用できますか？

• いいえ。セクショントリガーはページ上の実際のセクションレイヤーのみを検知します。コンポーネント内にあるセクションはページ構造から独立した領域として認識されるため、検知されません。

Q. 複数のアニメーションを1つのVariantに設定するとどうなりますか？

• 1つのVariantで設定したスタイルが別のVariantのスタイルと重なった場合、特にAuto Layout属性や高さ/幅変更が重なると、ブラウザのレンダリングプロセス中に意図しない動きが発生する可能性があります。

この記事はFramer公式ブログの‘Why aren't the effects in my project functioning’を翻訳・脚色したコンテンツです。