Трансформация маски на скролл

Уроки по Тильде

В этом видео я расскажу, как можно создать крутой переход используя маски

Описание

Посмотреть пример

Материал из видео

Настоятельно рекомендую посмотреть видео, перед тем как начать. Есть разные способы и решения. Возможно тот способ, с которого вы начнете вам не подойдет

Важно!!!

В Figma создаём фрейм размерами в экран 1920x1080 или выше. В нем добавляем свою svg фигуру

Шаг 1

Дублируем фрейм рядом и растягиваем фигуру (заполняем фрейм) в экран. Углы выравниваем

Шаг 2

Выгружаем 2 эти фигуры в формате svg

Шаг 3

Переходим в Tilda. В Zero блоке создаём шейп тех же размеров, что и фигура. Помещаем в него фоновое изображение (в моём случае размер шейпа +-414x579)

Шаг 4

На шейп вешаем класс img-clip-path

Шаг 5

Ниже создаём область в которую переместится изображение. Я буду трансформировать его в экран, поэтому я создам ниже zero блок в 100% высоты экрана

Шаг 6

Ниже создаём блок T123 и добавляем код (этот способ, если вы в ручную будете контролировать начало анимации. Но если вам нужен триггер, то код в шаге 9. Более подробно в видео)

Шаг 7

Скрипт


<style>
    /*Заменяем путь для первой фигуры*/
    .img-clip-path {
        top: 50% !important;
        left: 50% !important;
        width: 414px !important;
        height: 579px !important;
        transform: translate(-50%, -50%) scale(1);
        clip-path: path('M0.0820312 206.786C0.0820312 92.5811 92.7225 0 207 0C321.278 0 413.919 92.5811 413.919 206.786V579H0.0820312V206.786Z');
        overflow: hidden;
        transition-duration: 1.3s;
        transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    }
    
    /*Заменяем путь для второй фигуры*/    
    .img-clip-path_active {
        left: 50% !important;
        width: 100vw !important; 
        height: 100vh !important;
        top: 0% !important;
        transform: translate(-50%, 100vh);
        clip-path: path('M-18 3.32057e-05C421.177 0.000398468 419.866 0 960 0C1500.14 0 1498.82 0 1938 3.32057e-05V1080H-18V3.32057e-05Z');
        transition-duration: 1.3s;
        transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
        
    }
    
    /*Регулируем анимацию под устройства*/
    @media (max-width: 480px) and (min-width: 300px) {
        .img-clip-path {
            transform: translate(-50%, -55%) scale(0.6);
        }
        .img-clip-path .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        
        .img-clip-path_active .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        .img-clip-path_active {
            left: 50% !important;
            width: 1920px !important;
            height: 100vh !important;
            top: 0% !important;
            overflow: hidden;
            transform: translate(-50%, 100vh) scale(1) !important;
    }
        }
        
    @media (max-width: 1024px) and (min-width: 768px) {
        .img-clip-path {
            transform: translate(-50%, -55%) scale(0.6);
        }
        .img-clip-path .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        
        .img-clip-path_active .tn-atom {
            transition-duration: 1.3s;
            background-size: 200vh !important;
        }
        .img-clip-path_active {
            left: 50% !important;
            width: 1920px !important;
            height: 100vh !important;
            top: 0% !important;
            overflow: hidden;
            transform: translate(-50%, 100vh) scale(1) !important;
    }
        }
        
    @media (max-width: 1440px) and (min-width: 1023px) {
        .img-clip-path {
            transform: translate(-50%, -55%) scale(0.8);
        }
        .img-clip-path .tn-atom {
            transition-duration: 1.3s;
            background-size: 60vh !important;
        }
        
        .img-clip-path_active .tn-atom {
            transition-duration: 1.3s;
            background-size: 200vh !important;
        }
        .img-clip-path_active {
            left: 50% !important;
            width: 1920px !important;
            height: 100vh !important;
            top: 0% !important;
            overflow: hidden;
            transform: translate(-50%, 100vh) scale(1) !important;
    }
        }    
</style>

<script>
    
    jQuery(document).ready(function(){
  function classFunction(){
    /*Заменяем разрешение на своё*/
    if(jQuery('body').width()>376){ 
        $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    /*Точка отсчёта на скролл для пк (200)*/
    if (scroll >= 200) {
        $('.img-clip-path').addClass("img-clip-path_active");
     
    } else {
        $('.img-clip-path').removeClass("img-clip-path_active");
        
    }
});
    }
    else{
        $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    
    /*Точка отсчёта на скролл для мобилы (1)*/
    if (scroll >= 1) {
        $('.img-clip-path').addClass("img-clip-path_active");
     
    } else {
        $('.img-clip-path').removeClass("img-clip-path_active");
        
    }
});
    }
  }
  
  classFunction();
  jQuery("body").resize(classFunction);
 });

     
</script>

В коде заменяем ширину и высоту нашей фигуры (414x579) и путь до svg фигуры. В первой и второй

Шаг 8

Код для триггерной анимации. Он использует библиотеку. Библиотеку поместить над всем контентом. Скрипт под контентом

Шаг 8

Скрипт

Библиотека


<!--Библиотека-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js'></script>


<style>
    /*Заменяем путь для первой фигуры*/
    .img-clip-path {
        top: 50% !important;
        left: 50% !important;
        width: 414px !important;
        height: 579px !important;
        transform: translate(-50%, -50%) scale(1);
        clip-path: path('M0.0820312 206.786C0.0820312 92.5811 92.7225 0 207 0C321.278 0 413.919 92.5811 413.919 206.786V579H0.0820312V206.786Z');
        overflow: hidden;
        transition-duration: 1.3s;
        transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    }
    
    /*Заменяем путь для второй фигуры*/    
    .img-clip-path_active {
        left: 50% !important;
        width: 100vw !important; 
        height: 100vh !important;
        top: 0% !important;
        transform: translate(-50%, 100vh);
        clip-path: path('M-18 3.32057e-05C421.177 0.000398468 419.866 0 960 0C1500.14 0 1498.82 0 1938 3.32057e-05V1080H-18V3.32057e-05Z');
        transition-duration: 1.3s;
        transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
        
    }
    
    /*Регулируем анимацию под устройства*/
    @media (max-width: 480px) and (min-width: 300px) {
        .img-clip-path {
            transform: translate(-50%, -55%) scale(0.6);
        }
        .img-clip-path .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        
        .img-clip-path_active .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        .img-clip-path_active {
            left: 50% !important;
            width: 1920px !important;
            height: 100vh !important;
            top: 0% !important;
            overflow: hidden;
            transform: translate(-50%, 100vh) scale(1) !important;
    }
        }
        
    @media (max-width: 1024px) and (min-width: 768px) {
        .img-clip-path {
            transform: translate(-50%, -55%) scale(0.6);
        }
        .img-clip-path .tn-atom {
            transition-duration: 1.3s;
            background-size: 100vh !important;
        }
        
        .img-clip-path_active .tn-atom {
            transition-duration: 1.3s;
            background-size: 200vh !important;
        }
        .img-clip-path_active {
            left: 50% !important;
            width: 1920px !important;
            height: 100vh !important;
            top: 0% !important;
            overflow: hidden;
            transform: translate(-50%, 100vh) scale(1) !important;
    }
        }
</style>

<script>


/*Указываем тригер и меняем классы*/
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: ".trigger-clip-path",
  markers: false,
  start: "top center",
  end: "top top",
  onEnter: () => myfunction_1(),
  onLeaveBack: () => myfunction_1(),
});
function myfunction_1() {
  $('.img-clip-path').toggleClass("img-clip-path_active");
};


/*Указываем тригер и меняем классы*/
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: ".trigger-clip-path-2",
  markers: false,
  start: "top center",
  end: "top top",
  onEnter: () => myfunction_2(),
  onLeaveBack: () => myfunction_2(),
});
function myfunction_2() {
  $('.img-clip-path_2').toggleClass("img-clip-path_active");
};
</script>

Для того, чтобы триггер работал нужно создать дополнительный шейп с прозрачностью в 0% и классом trigger-clip-path. И поместить его в ту область, где он должен срабатывать

Шаг 10