🎓 Scroll-анимации как у агентства: GSAP Коллеги, видел у студии прокрутку с анимацией. Воспроизвёл за вечер.
Preloader, staggered text, parallax — по мотивам видео "Алло Бюро".
📍GSAP + ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo(".hero-title", {
y: 100,
opacity: 0
}, {
y: 0,
opacity: 1,
duration: 1.2,
ease: "power2.out"
});
Основа для всех анимаций.
📍Preloader Лоадер с прогресс-баром:
- Загружает критичные ресурсы
- Показывает процент загрузки
- Плавно исчезает
- Запускает основные анимации
Вместо мгновенного появления контента.
📍Staggered text
gsap.from(".word", {
y: 50,
opacity: 0,
duration: 0.8,
stagger: 0.1,
scrollTrigger: ".text-block"
});
Слова появляются по очереди с задержкой 0.1с.
📍Parallax эффект Фон движется медленнее контента:
gsap.to(".parallax-bg", {
y: "-50%",
ease: "none",
scrollTrigger: {
trigger: ".section",
scrub: true
}
});
scrub: true привязывает анимацию к скроллу.
📍Тёмная/светлая тема Тема переключается с анимацией:
- Плавная смена цветов
- Animated иконка переключателя
- Сохранение выбора в localStorage
Bез резких скачков.
📍Результат NixProSoft v2:
- Time on page +67%
- Bounce rate -34%
- Conversion rate +23%
- Более высокий perceived performance
Анимации продают идею качества.
Как создал интерактивное портфолио без дизайнера. GSAP туториал в бесплатном гиде.
#моикейсы_поповвии Работаем дальше.
