Эффект волны при наведении на пункты меню

Стандартное меню — блок МЕ103 «Меню в одну линию, ссылки на страницы центру»

Инструкция

  • 1

    Добавляем блок меню МЕ 103 на страницу

  • 2

    Добавляем блок Т123

  • 3

    В блоке T123 перходим в контент → вставляем код

  • 4

    Сохраняем

  • 5

    Жмём опубликовать → смотрим

Код для вставки


<!--https://atilda.ru/menu-wave-->
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script>
   
    const menuList = new SplitType('.t229__list_item')
    const listLink = document.querySelector('.t229__list_item');
    
    
    document.querySelectorAll(".t229__list_item").forEach((menuItem) => {
    menuItem.addEventListener("mouseenter", () => {
        
        gsap.to(menuItem.querySelectorAll(".char"), {
            y: -10,
            stagger: 0.05,
            duration: 0.3,
            ease: "power1.out",
        });
    });

    menuItem.addEventListener("mouseleave", () => {
        
        gsap.to(menuItem.querySelectorAll(".char"), {
            y: 0,
            stagger: 0.05,
            duration: 0.3,
            ease: "power1.out",
        });
    });
});
   
</script>
	

Есть идеи, сложности с реализацией или что-то не получается?

Всегда буду рад обратной связи и готов помочь.

По всем вопросам пишите в Telegram