Скрытии элементов при клике на кнопку,Ошибка в коде?

Question

[noob-dev-js]

где я допустил ошибку? Нужно чтобы при клике gsap скрывал это все

$('.btn-next').on('click',
  function() {
      var tl2 = gsap.timeline();

      tl2.to(".but-1", {duration:1, alpha:0,});
      tl2.to(".but-2", {duration:1, alpha:0,});
      tl2.to(".but-3", {duration:1 , alpha:0,});
      tl2.to(".but-4", {duration:1 , alpha:0,});
      tl2.to(".call-us-last", {duration:1, alpha:0,});
      tl2.to(".definitely", {duration:1, alpha:0,});
      tl2.to(".btn-next", {duration:1 , alpha:0,});
      tl2.to(".call-us-txt", {duration:1 , alpha:0,});
      
  });

<span class="txt-but but-1">but...</span>
<span class="txt-but but-2">- but</span>
<span class="txt-but but-3">but...</span>
<span class="txt-but but-4">-but</span>

<span class="definitely">definitely</span>
<span class="call-us-last">call us...</span>
<button class="btn-next"><img src="images/button-arrow.svg" alt="image-button"></button>
<span class="call-us-txt">call us...</span>

Comments

[Spartak (Web-StyleStudio)]

Попробуйте так

$('.btn-next').on('click', function() {
	var tl2 = gsap.timeline();

	tl2
	.to(".but-1", 1, {opacity:0})
	.to(".but-2", 1, {opacity:0})
	.to(".but-3", 1, {opacity:0})
	.to(".but-4", 1, {opacity:0})
	.to(".call-us-last", 1, {opacity:0})
	.to(".definitely", 1, {opacity:0})
	.to(".btn-next", 1, {opacity:0})
	.to(".call-us-txt", 1, {opacity:0});
});

[Никита]

Казалось бы, при чем тут CSS ^)

[noob-dev-js]

Spartak (Web-StyleStudio), а как туда добавить еще чтобы эти элементы скрылись, а другие появились?
сколько не пробовал , ничего не получалось

tl2.from(".logo", {y:-200,duration:1.5, alpha:0,color:"#333333",filter: "blur(8px)"})
tl2.from(".accordion-wrapper", {y:-200,duration:1.5, alpha:0,color:"#333333",filter: "blur(8px)"})
tl2.from(".form", {y:-200,duration:1.5, alpha:0,color:"#333333",filter: "blur(8px)"})
tl2.from(".logo-partners__wrappper", {y:-200,duration:1.5, alpha:0,color:"#333333",filter: "blur(8px)"})