gsap скрытие блоков z-index или visiblity: hidden

Question

Сделал анимацию с помощью gsap
Но когда блоки заканчивают анимацию, их можно выделить, пробовал в timeline прописать visibility: hidden, или Zindex: -10, но не работает почему-то.
Я хочу сделать так, чтобы с блоками нельзя было взаимодействовать, когда они скрыты

const mainText = document.querySelector(".main__text");
const headerInner = document.querySelector(".header__inner");
const after_reading_letter = document.querySelector(".after_reading_letter");
const btnDesires = document.querySelector(".btn-desires");
const text__previe = document.querySelector(".text__previe");
const btnAnimashka = document.querySelector(".btn-animashka");


const tl = gsap.timeline({ defaults: { duration: 0.5 } });

tl.from(headerInner, { opacity: 0, x: -400 })
  .from(mainText, { opacity: 0, y: 200 })
  .from(after_reading_letter, { opacity: 0 })
  .from(btnAnimashka, { opacity: 0, duration: 0.4, onComplete: completeTl});

function completeTl(event) {
  const childrenTl = tl.getChildren();
  tl.remove(childrenTl[childrenTl.length - 1]);
}

btnAnimashka.addEventListener('click', (e) => {
  if (tl.reversed()) {
    tl.play();
  } else {
    tl.reverse();
  }
});

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

body>main {
  flex: 1;
  padding: 40px 0;
  overflow: hidden;
}

header {
  padding: 10px 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
}

.btn-animashka {
  z-index: 10;
  position: relative;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<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.5.1/CSSRulePlugin.min.js"></script>

<header>
  <div class="container">
    <div class="header__inner">
      <h1 class="text-center">Заголовок!</h1>
    </div>
  </div>
</header>

<main>
  <div class="container">

    <div class="text__previe">
      <p class="main__text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis nostrum dolores velit, molestias deleniti eum obcaecati nam iste non soluta placeat illum possimus sequi voluptas expedita eaque distinctio quas unde. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Mollitia illo, quis ad assumenda voluptatem impedit quos modi suscipit deleniti officia, illum tempora, quibusdam magni minus. Recusandae voluptatum esse totam architecto?
      </p>
      <p class="after_reading_letter">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil vel eveniet repudiandae aspernatur perferendis voluptas magni. Magnam minus saepe eum atque sit a explicabo, error perferendis, in ex, natus labore?
      </p>

    </div>

    <div class="btn btn-primary btn-animashka">Анимашка</div>

  </div>
  <!-- .container -->
</main>

Answer 1

Я решил добавить 'pointer-events': 'none', 'user-select': 'none' и всё перестало выделяться

const mainText = document.querySelector(".main__text");
const headerInner = document.querySelector(".header__inner");
const after_reading_letter = document.querySelector(".after_reading_letter");
const btnDesires = document.querySelector(".btn-desires");
const text__previe = document.querySelector(".text__previe");
const btnAnimashka = document.querySelector(".btn-animashka");


const tl = gsap.timeline({ defaults: { duration: 0.5 } });

tl.from(headerInner, { opacity: 0, x: -400, 'pointer-events': 'none', 'user-select': 'none' })
  .from(mainText, { opacity: 0, y: 200, 'pointer-events': 'none', 'user-select': 'none' })
  .from(after_reading_letter, { opacity: 0, 'pointer-events': 'none', 'user-select': 'none' })
  .from(btnAnimashka, { opacity: 0, duration: 0.4, onComplete: completeTl});

function completeTl(event) {
  const childrenTl = tl.getChildren();
  tl.remove(childrenTl[childrenTl.length - 1]);
}

btnAnimashka.addEventListener('click', (e) => {
  if (tl.reversed()) {
    tl.play();
  } else {
    tl.reverse();
  }
});

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

body>main {
  flex: 1;
  padding: 40px 0;
  overflow: hidden;
}

header {
  padding: 10px 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.1);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<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.5.1/CSSRulePlugin.min.js"></script>

<header>
  <div class="container">
    <div class="header__inner">
      <h1 class="text-center">Заголовок!</h1>
    </div>
  </div>
</header>

<main>
  <div class="container">

    <div class="text__previe">
      <p class="main__text">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis nostrum dolores velit, molestias deleniti eum obcaecati nam iste non soluta placeat illum possimus sequi voluptas expedita eaque distinctio quas unde. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Mollitia illo, quis ad assumenda voluptatem impedit quos modi suscipit deleniti officia, illum tempora, quibusdam magni minus. Recusandae voluptatum esse totam architecto?
      </p>
      <p class="after_reading_letter">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil vel eveniet repudiandae aspernatur perferendis voluptas magni. Magnam minus saepe eum atque sit a explicabo, error perferendis, in ex, natus labore?
      </p>

    </div>

    <div class="btn btn-primary btn-animashka">Анимашка</div>

  </div>
  <!-- .container -->
</main>

БЛОГ НА HUSL

gsap скрытие блоков z-index или visiblity: hidden

Ответы (1 шт):