При наведении
По клику
There is no design without discipline. There is no discipline without intelligence.
Everything should be made as simple as possible, but not simpler.
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
HOVER ME
Зависимая анимация при наведении
1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при наведение на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.
Код 1
<!-- Тильдошная зависимая анимация для zero блока при наведении -->
<script>
function dependentAnimationOnHover(e,o,i){setTimeout(function(){o.unbind("click")},500),i*=1e3;var t=!1,a=!1;function n(){a||(a=!0,function(){o.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","normal"),o.addClass("t-sbs-anim_started");var n=o.clone();o.before(n),o.remove(),o=n,setTimeout(function(){t?e.on("mouseleave",r):r()},i)}())}function r(){e.unbind("mouseleave",r),o.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","reverse");var n=o.clone();o.before(n),o.remove(),o=n,setTimeout(function(){a=!1},i)}e.hover(function(){t=!0,n()},function(){t=!1})}
</script>
Код 2
<script>
$("document").ready(function(){
	// Класс элемента, на который наводим
	var hoverElem = $(".tn-elem__1149003771562151458350");
	// Класс элемента, который будет анимироваться
	var animElem = $(".tn-elem__1149003771562095593462");
	// Суммарное время анимации в секундах, выставленное в редакторе анимации
	var time = 0.3;
	dependentAnimationOnHover(hoverElem, animElem, time);
})
</script>
There is no design without discipline. There is no discipline without intelligence.
Зависимая анимация по клику
1) Создаем в редакторе zero блока элемент и настраиваем ему анимацию с настройкой EVENT: On click.

2) Создаем элемент, при наведении на который будет происходить анимация на первом элементе.

3) Добавляем код 1 в блок T123.

4) Добавляем код 2 в блок T123 и указываем в нем:
Класс элемента, на котором задали анимацию в шаге 1;
Класс элемента, при наведение на который будет происходить анимация;
Суммарное время анимации в секундах, которое указали в редакторе анимации.

5) Если нужно добавить еще одну зависимую анимацию, нужно копировать только код 2.
Код 1
<!-- Тильдошная зависимая анимация для zero блока по клику -->
<!-- Код 1: должен быть один на странице -->
<script>
function dependentAnimationOnClick(i,e,t){setTimeout(function(){e.unbind("click")},500),t*=1e3;var o=!1,c=!1;function n(){c||(c=!0,function(){e.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","normal"),e.addClass("t-sbs-anim_started");var n=e.clone();e.before(n),e.remove(),e=n,setTimeout(function(){o?i.on("click",a):a()},t)}())}function a(){i.unbind("click",a),e.children(".tn-atom__sbs-anim-wrapper").css("animation-direction","reverse");var n=e.clone();e.before(n),e.remove(),e=n,setTimeout(function(){c=!1},t)}i.click(function(){0==o?(o=!0,n()):o=!1})}
</script>
Код 2
<!-- Тильдошная зависимая анимация для zero блока по клику -->
<!-- Код 2: здесь указываем классы элементов и время анимации -->
<script>
$("document").ready(function(){
	// Класс элемента, на который наводим
	var hoverElem = $(".tn-elem__1148719531562151458350");
	// Класс элемента, который будет анимироваться
	var animElem = $(".tn-elem__1148719531562569303474");
	// Суммарное время анимации в секундах, выставленное в редакторе анимации
	var time = 1;
	dependentAnimationOnClick(hoverElem, animElem, time);
})
</script>
Made on
Tilda