在现代网页设计中，动画效果是提升用户体验的重要手段。Framer Motion 作为一个流行的动画库，以其简单易用的 API 而受到开发者的青睐。本文将通过一个实际案例，探讨如何使用 Framer Motion 实现两个图片元素的滑入效果，并且解决在滚动过程中可能出现的动画不一致性问题。
问题描述
假设我们有两个图片元素，我们希望它们在页面加载或滚动到视口时，从左侧滑入。然而，实际使用中发现，如果缓慢滚动到包含这两个图片的区域，可能会遇到第一个图片动画完毕而第二个图片未开始动画的情况。这种不一致性是因为每个图片元素独立地响应whileInView触发条件。
解决方案
为了解决这个问题，我们需要引入一个容器元素来统一控制动画的触发时机。以下是具体实现步骤：
1. 定义动画变体
首先，我们定义了两个状态：initial和animate，分别代表图片未显示和显示时的状态：
constvariants={initial