<!--Пиксельный переход-->
<!--https://mt-webdesign.ru/pixels-->
<!--Подключаем библиотеку-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
<!--Меняем цвет кубиков и их размеры в параметрах fill (цвет) и scale (размер)-->
<style>
.cubes-1, .cubes-2 {
zoom: 1 !important;
pointer-events:none;
}
.cubes-1 rect {
transform: scale(2);
fill: #5454bf;
}
.cubes-2 rect {
transform: scale(2);
fill: #daffc2;
}
</style>
<!--Добавляем скрипт (заменить класс триггера на свой - uc-section-cubes-1, класс с кубиками - cubes-1 -->
<script>
gsap.set(".bolt polygon", { transformOrigin: "center center" });
let svgcubes_1 = gsap.timeline({
scrollTrigger: {
trigger: ".uc-section-cubes-1",
start: "top top",
end: "bottom bottom",
scrub: true
}
});
svgcubes_1.from(".cubes-1 rect", { opacity: 0, duration: 0.001, stagger: { amount: 0.3, from: "random" } });
svgcubes_1.from(".bolt polygon", { scale: 0.1, ease: "power3.in", stagger: 0.002 });
svgcubes_1.from(".bolt polygon", { opacity: 0, duration: 0.001, ease: "power3.in", stagger: 0.002 }, "<");
</script>