Чтобы создать анимацию границы при прокрутке вниз в CodePen, вы можете использовать различные методы. Вот несколько примеров:

1. CSS-переходы. Вы можете использовать CSS-переходы для анимации границы элемента при прокрутке. Добавив класс к элементу при прокрутке вниз, вы можете применить эффект перехода к свойству границы, создав анимированный эффект границы.

2. JavaScript и CSS-анимация. Другой подход — использовать JavaScript для обнаружения события прокрутки и применения CSS-анимации к границе. Вы можете добавить класс к элементу при прокрутке и определить анимацию с помощью ключевых кадров CSS.

3. Анимация SVG. Если вы предпочитаете использовать SVG для анимации границ, вы можете создать элемент SVG с обводкой и анимировать его свойства с помощью CSS или JavaScript. Управляя атрибутами Stroke-Dasharray и Stroke-dashoffset, вы можете создать эффект границы, который анимируется при прокрутке.

4. Библиотеки, запускаемые прокруткой. Существует несколько библиотек JavaScript, таких как ScrollMagic или ScrollReveal, которые обеспечивают простой способ запуска анимации в зависимости от положения прокрутки. Эти библиотеки часто имеют встроенную поддержку анимации границ при прокрутке.

5. API Intersection Observer API: API Intersection Observer — это собственный API JavaScript, который позволяет наблюдать, когда элемент входит или выходит из области просмотра. Вы можете использовать этот API для запуска анимации рамки, когда элемент появляется в поле зрения во время прокрутки.