Как добавить задержку в анимацию, если она изначально находится в просмотре, в противном случае иметь другую задержку? ⇐ Javascript

[Anonymous]

Я пытаюсь создать веб -сайт, используя React и Framer Motion, и я сталкиваюсь с вызовом. Хочу, чтобы на анимации была задержка. Но если элемент не в Viewport, и пользователь должен прокрутить его, чтобы увидеть его, я хочу, чтобы было другое значение задержки. < /P>
Так, например, на моем веб -сайте я Иметь заголовок Lorem Ipsum и немного текста, который я рендеринг первым. Тогда у меня есть заголовок Projects , который делает второй. И, наконец, A My Project блокирует, который делает третье место. " /> < /p>
Это выглядит великолепно, если высота окна достаточно большая, чтобы все загружалось одновременно. < /p>
Но если высота окна меньше , как и в GIF ниже, Block My Project занимает слишком много времени для загрузки. sstatic.net/hyczpyoy.gif " /> < /p>
Я бы хотел, чтобы это было так, чтобы он загружался быстрее, как это: < /p>

Я попытался искать в Интернете, чтобы увидеть, была ли у кого -то эту проблему раньше, Но я не мог найти никаких сообщений в Интернете об этом.
Есть идеи о том, как это решить? br />
// page.tsx




Lorem ipsum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore


Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris




Projects





< /code>
// Card.tsx

type CardProps = {
title: string;
description: string;
index: number;
};

export default function Card({
title,
image,
altText,
slug,
index,
description,
}: CardProps) {
delay = 1.05 + index * 0.2; // default delay
// delay = 0.25; // delay I want if it's not in the viewport on first page load

return (

{title}
{description}

Learn more
...


);
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... -otherwise