AnimateX: Scroll Twist

Инструкция:

Шаг 1

Создаём Zero-блок и вешаем на него класс uc-scroll-twist-1

Шаг 2

В этом же Zero-блоке создаём HTML-блок и добавляем код, его можно найти внизу страницы "Добавить в Zero-блок". Размеры блока на скрине ниже

Шаг 3

Создаём 2 одинаковые карточки тех же размеров, что и html-блок, присваиваем им классы.
Передние стороны:
scroll-twist-card-before-1
Задние стороны:
scroll-twist-card-after-1

Выравниваем все карточки по гриду, левый верхний угол (автоскейл)

Шаг 4

Создаём пошаговую анимацию для HTML-блока:
Event: on Scroll;
Start trigger: on Window center;
Trigger offset: -100 (делал, чтобы был сдвиг небольшой);
На первый шаг задаём нужную дистанцию к примеру 800px и фиксируем её (fix: fixed).

Шаг 5

Далее создаем 2 шейпа:
Первый шейп с классом scroll-twist-card-top - он нужен для запуска анимации.
Второй шейп с классом scroll-twist-card-bottom- он нужен для завершения анимации.
Убираем у них кликабельность с помощью свойства pointer-events: none; в дальнейшем и цвет

Шаг 6

Первый шейп с классом scroll-twist-card-top выравниваем по вверхней границе Zero блока, а по высоте вытягиваем до html, что анимируем + примерно до середины высоты HTML (у меня 400px). К примеру: HTML-блок стоит по Y на 300px, значит высота scroll-twist-card-top должна быть 300px + 100px = 400px.

Шаг 7

Второй шейп с классом scroll-twist-card-bottom выравниваем по нижней границе Zero блока, а по высоте вытягиваем до scroll-twist-card-top с учетом отступа в продолжительность анимации. То есть, то пространство (отступ) что вы оставите между двумя этими шейпами и будет продолжительность анимации. scroll-twist-card-top и scroll-twist-card-bottom - это своего рода отступы, которые позволяют контролировать продолжительность анимации. В моём случае отступ между ними в 800px

Из кода переместите часть "Добавить в Zero-блок" в HTML-блок в Zero-блоке. Не забудьте выключить цвет у scroll-twist-card-top и scroll-twist-card-bottom

Шаг 8

Код из видео (autoscale)


<!--Добавить в Zero-блок-->
<div class="scroll-twist-wrapper-inside-1">
<div class='scroll-twist-wrapper-1'>
<div class="scroll-twist-wrapper-inside-anim-1">
<div class='scroll-twist-1 scroll-twist-card-1'></div>
</div>
</div>
</div>
<!---->
<script>
[1, 2].forEach(function(setNum) {
for (let cardNum = 1; cardNum <= 1; cardNum++) {
const baseSelector = `.uc-scroll-twist-${setNum} .scroll-twist-card-${cardNum}`;
$(`.uc-scroll-twist-${setNum} .scroll-twist-card-before-${cardNum}`).appendTo(baseSelector);
$(`.uc-scroll-twist-${setNum} .scroll-twist-card-after-${cardNum}`).appendTo(baseSelector);
}
});
</script>
<style>
.t396__elem[class*="scroll-twist-card-anim-"] {
perspective: 2000px;
transform-style: preserve-3d;
}
.t396__elem[class*="scroll-twist-content-after-"] {
zoom: 0 !important;
}
[class^="scroll-twist-wrapper-"] {
width: 100%;
height: 100%;
}
[class^="scroll-twist-wrapper-inside-"] {
perspective: 2000px;
backface-visibility: hidden;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.t396__elem[class*="scroll-twist-card-after-"] {
transform: rotateY(-180deg);
}
[class^="scroll-twist-card-before-"] .tn-atom,
[class^="scroll-twist-card-after-"] .tn-atom {
backface-visibility: hidden;
}
[class^="scroll-twist-card-before-wrapper-"] div,
[class^="scroll-twist-card-after-wrapper-"] div,
.t396__elem[class*="scroll-twist-card-after-"],
.t396__elem[class*="scroll-twist-card-before-"] {
perspective: 2000px;
backface-visibility: hidden;
transform-style: preserve-3d;
}
[class^="scroll-twist-card-before-wrapper-"],
[class^="scroll-twist-card-after-wrapper-"] {
perspective: 2000px;
transform-style: preserve-3d;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
[class^="scroll-twist-card-after-wrapper-"] {
transform: rotateY(-180deg);
}
[class^="scroll-twist-inside-"] {
backface-visibility: hidden;
}
[class^="scroll-twist-"] {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
perspective: 2000px;
transform-style: preserve-3d;
}
@media only screen and (min-width: 320px) {
[class^="scroll-twist-card-before-"],
[class^="scroll-twist-card-after-"] {
backface-visibility: hidden;
zoom: 0 !important;
}
[class^="scroll-twist-card-before-wrapper-"] div,
[class^="scroll-twist-card-after-wrapper-"] div,
.t396__elem[class*="scroll-twist-card-after-"],
.t396__elem[class*="scroll-twist-card-before-"] {
zoom: 0 !important;
}
}
</style>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
gsap.registerPlugin(ScrollTrigger);
function getEffectiveHeight(elem) {
if (!elem) return 0;
const height = elem.offsetHeight;
const zoom = parseFloat(getComputedStyle(elem).zoom || "1");
return height * zoom;
}
const width = window.innerWidth;
const isMobile = width >= 320 && width <= 479;
const isSmallTablet = width >= 480 && width <= 639;
const isTablet = width >= 640 && width <= 959;
const isLaptop = width >= 960 && width <= 1199;
const isLarge = width >= 1200;
let initialTransforms;
let endAnimParams;
initialTransforms = { x: 0, y: 0, z: 0, rotationY: 15 };
endAnimParams = { rotationY: -180 };
let i = 1;
while (true) {
const container = document.querySelector(`.uc-scroll-twist-${i}`);
if (!container) break;
const triggerStart = container.querySelector(`.scroll-twist-card-top`);
const triggerEnd = container.querySelector(`.scroll-twist-card-bottom`);
if (!triggerStart || !triggerEnd) {
i++;
continue;
}
const offsetTop = getEffectiveHeight(triggerStart);
const offsetBottom = getEffectiveHeight(triggerEnd);
const containerHeight = container.offsetHeight;
const startTrigger = `top+=${offsetTop} center`;
const endTrigger = `top+=${containerHeight - offsetBottom} center`;
const card = container.querySelector(`.scroll-twist-card-1`);
if (!card) {
i++;
continue;
}
gsap.set(card, initialTransforms);
gsap.to(card, {
...endAnimParams,
ease: "none",
scrollTrigger: {
trigger: container,
start: startTrigger,
end: endTrigger,
scrub: true,
markers: false
}
});
i++;
}
});
</script>

Примечание

Если нужно создать новую анимацию в другом Zero-блоке, то у него уже меняем свой порядковый номер на uc-scroll-twist-2

Политика конфиденциальности

Пользовательское соглашение

Модификации

Курсы

Блог

ЗАДАТЬ ВОПРОС