如何使用 gsap scrolltrigger 在我的點擊呼叫按鈕上創建淡入淡出效果？

Question

/* CONTACT BUTTON */
.contact-button {
  position: fixed;
  bottom: 20px;
  right: 25px;
  text-decoration: none;
  padding: 15px 15px;
  font-size: 20px;
  border-radius: 20px;
  border: rgb(39, 152, 116, 0.7);
  background-color: rgba(39, 152, 116, 0.75);
  color: rgba(255, 249, 249, 0.776);
}

.contact-button:hover {
  border: rgb(29, 112, 86);
  cursor: pointer;
  background-color: rgb(29, 112, 86);
}


// Creating the ScrollTrigger for Click-to-Call Button

gsap.registerPlugin(ScrollTrigger);

const callButton = document.querySelector(".contact-button");

ScrollTrigger.create({
  trigger: callButton,
  start: "#help, top",
  endTrigger: "#signup",
  end: "top top",
});

我正在創建一個網站，最近添加了一個點擊呼叫按鈕，該按鈕具有固定的 position。我不希望該按鈕出現在我的主頁上，但我希望它在用戶滾動到主頁時立即出現。

我將 gsap 和 scrolltrigger 腳本都添加到我的 html 文檔中，然后在我的腳本文件中注冊了插件，然后再編寫應該產生所需效果的代碼。 保存時，沒有任何反應，我正在尋求幫助以使其正常工作。

Answer 1

您是否在某處有 gsap tween 供 Scrolltrigger 調用？

此外，在 scrolltrigger 元素出現之前，您需要滾動一些內容。 這是一個解決方案 - https://codepen.io/geedix/pen/ZEjrqXX gsap.to(".contact-button", {opacity:1, scrollTrigger:"#signup"})