Введение

? Привет, разработчики!

Добро пожаловать на день 7 моего путешествия по GSAP, где я исследую безграничные возможности анимации в Интернете. Сегодня я взял на себя задачу создать интерактивную анимацию с прокруткой с динамическим текстом и вращающимися стрелками.

Благодаря мощным инструментам анимации GSAP мы заставим страницу реагировать на направление прокрутки пользователя — вверх или вниз — плавным движением и вращением. Давайте погрузимся!

Что мы строим?️

Наша анимация будет включать в себя:

• Прокручиваемая область текста и изображений.
• Адаптивная анимация, которая настраивается в зависимости от направления прокрутки.
• Вращающиеся стрелки, чтобы добавить изюминку!

Вы можете просмотреть живую демонстрацию здесь.

HTML-структура

Вот простая HTML-разметка, которую я использовал:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});








  
  
  Как это работает ⚙️




Прослушиватель событий: window.addEventListener("wheel") определяет направление прокрутки.


Анимация GSAP:



gsap.to() перемещает область выделения в определенном направлении.

Вращение стрелок придает ощущение динамичности и интерактивности.




Бесконечная прокрутка: использование повтора: -1 гарантирует, что выделение будет продолжаться бесконечно.







  
  
  Проблемы и уроки


? Задача: синхронизировать направление прокрутки с движением области выделения было непросто.


? Решение: надежный API GSAP упростил тонкую настройку анимации с помощью таких свойств, как повтор, легкость и продолжительность.  





  
  
  Заключительные мысли


Этот проект показал, как GSAP может обрабатывать взаимодействия на основе прокрутки и оживлять веб-страницы. Независимо от того, работаете ли вы над личным портфолио или творческим веб-сайтом, GSAP — идеальный инструмент, позволяющий сделать анимацию привлекательной и интуитивно понятной.  

? Попробуйте сами и поделитесь своими творениями! 





  
  
  Ресурсы




Документация ГСАП


Живая демо-версия


Исходный код на GitHub