Лабораторія / 02 · 7 прикладів
Моушн
Невеликі дослідження того, як рух пояснює інтерфейс: скрол, макет, текст і дані, кожне зі спокійнішою версією для режиму зменшеного руху.
Показано 7 з 7
Архітектурне бюро
Повний лендинг вигаданої архітектурної студії, де кожна секція використовує анімацію GSAP: розбитий на частини заголовок, магнітні кнопки, паралакс фасаду, малювання й морфінг SVG, слайдер кейсів, сітка скетчбука, фільтрація Flip, лічильники, карусель із перехресним згасанням і акордеон.
GSAPScrollTrigger+5 ще
Квіткова студія Ottilie
Лендинг і магазин вигаданої квіткової студії, побудований на русі: літери й фото влітають у перший екран і ширяють, падають пелюстки, закріплений ряд букетів їде вбік, кожен букет летить дугою в кошик, чотири настрої розгортають колір по сторінці, а стебло саме малюється вниз і розквітає.
GSAPScrollTrigger+4 ще
Парфумерний дім
Лендинг вигаданого парфумерного дому: під час скролу скляний флакон наповнюється верхніми, серцевими й базовими нотами, кожен розділ здіймає власний кольоровий дим, а конструктор дає кидати інгредієнти в колбу й дивитися, як вони змішуються.
GSAPScrollTrigger+4 ще
Ostra Tidal 41
Сторінка запуску вигаданого годинника для дайвінгу в стилі продуктових сторінок Apple: 330 кадрів, заздалегідь відрендерених із годинника, змодельованого в коді, програються на 2D-canvas під час скролу, з виносками, що супроводжують кожну деталь протягом повного оберту, розібраним видом, крупним планом циферблата, нічним розділом і вибором ремінця.
GSAPScrollTrigger+3 ще
Lumora: вхід
Вхід і реєстрація для вигаданої платформи для авторів: небо з туманністю на WebGL з мерехтливими зорями, світла, темна й системна теми з круговим переходом, англійська, українська та іспанська, налаштування розміру тексту, skeleton-завантаження, валідація на льоту з виправленням описок в email і індикатором надійності пароля, крок із кодом з листа і дашборд, що поступово завантажується.
ReactTypeScriptWebGL+3 ще
Velvetry
Продажний лендинг для вигаданої компанії з хімчистки м’яких меблів, що працює з кав’ярнями, готелями й офісами: диван «до і після», який можна порівняти перетягуванням, калькулятор вартості з ціною, що прокручується, тарифи з виділеним фаворитом, гарантія, FAQ і коротка форма запису, усе на чистих HTML, CSS і SVG, тож сторінка швидко завантажується на будь-якому телефоні.
GSAPScrollTriggerSVG+1 ще
02.1 · 1 інструмент
Генеративні інструменти
Дизайн, створений кодом: системи із сідом, намальовані на p5.js, що перетворюють кілька вхідних параметрів на знаки, палітри й візерунки, відтворюються за посиланням і експортуються в SVG.
