javascript - GSAP On 滚动视频和文本淡入淡出动画

问题描述

再会。我是 GSAP 的新手。我正在做一个项目，在该项目中我实现了 GSAP 以在鼠标滚动上创建带有一些文本动画的视频淡入淡出。动画的逻辑是当我们滚动鼠标滚轮时，视频和文本随着淡入淡出动画而变化。整个页面将包含两次相同的动画部分。每个部分将有 4 个视频（因此 2 个部分共有 8 个视频），滚动鼠标后视频会发生变化。希望你对动画有所了解。检查我正在寻找的实际动画https://www.loom.com/share/0fca10c0f566413aa1e05f1ed8412acc

对于第一部分，动画效果很好，但是当我尝试创建与第一部分几乎相似的第二部分时，我遇到了问题。

所以，如果有人能给我一些想法，我该怎么做，那么我将非常感激。另外，如果我做错了什么，你可以告诉我。另外请让我知道是否有其他更好的解决方案来制作相同类型的动画。提前致谢。

gsap.registerPlugin(ScrollTrigger);


// Fade hero elements based in scroll position
// Show next panel by fade in
function header_videos(){
  async function show_next_hero_panel(newSection) {
    if (newSection !== currentSection) {
      //get text for animaiton
      let current_text = currentSection.querySelectorAll(".intro_video_text");
      gsap.from(current_text, {autoAlpha: 1, y:0, duration:1})
      gsap.to(current_text, {autoAlpha: 0, y:-100, duration:1})
      gsap.to(currentSection, {autoAlpha: 0, duration:1, delay:.4})


      let next_text = newSection.querySelectorAll(".intro_video_text");
      gsap.to(newSection, {autoAlpha: 1, duration:1, delay:.4})  
      gsap.from(next_text, {autoAlpha: 1, y:100, duration:1, delay:.4});
      gsap.to(next_text, {autoAlpha: 1, y:-0, duration:1, delay:.6});

      currentSection = newSection;
    }
  }

  const $hero_panel_el = ".main-wrapper__panel";
  const panels = gsap.utils.toArray($hero_panel_el);

  gsap.set(`${$hero_panel_el}:first-of-type`, {autoAlpha:1});
  gsap.set(".main-wrapper__panel-wrapper", {height: ($($hero_panel_el).innerHeight() * panels.length) + "px"});

  gsap.set(panels[0], {autoAlpha:1});
  let currentSection = panels[0];

  panels.forEach((panel, i) => {
    ScrollTrigger.create({
      start: () => (i - 0.3) * innerHeight,
      end: () => (i + 0.3) * innerHeight,
      onToggle: self => self.isActive && show_next_hero_panel(panel),
      // toggleClass: {targets: ".main-wrapper", className: "fixed-pos"}
    });
  });
}



// Verticall slide grid
//uncommon_experience sectoin gsap slide
function uncommo_experience() {

  let sections = gsap.utils.toArray(".ue-card");
  gsap.to(sections, {
    xPercent: -50 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".uncommon-experience",
      pin: true,
      start: "top +=98px",
      scrub: 1,
      snap: {
        snapTo: 1 / (sections.length - 1),
        duration: {min: 0.2, max: 0.3},
        delay: 0
      },
      // Base vertical scrolling on how wide the container is so it feels more natural.
      end: () => "+=" + (document.querySelector(".container").offsetWidth / 5)
    }
  });

}

header_videos();
uncommo_experience();

*{
  margin: 0;
  padding: 0;
}
.container{
  width: 80%;
  margin: 0 auto;
}

.logo img {
  max-width:150px;
}
.full-sec{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.bg-white{
  background: #fff;
}
.sec-title {
  text-align: center;
  padding: 40px 30px;
}

.header{
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 99;
  padding: 17px 0 15px;
}

.header:before {
  content: "";
  width: 80%;
  height: 1px;
  background: #D5D5D5;
  left: 10%;
  bottom: 0;
  position: absolute;
}

.h-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.h-wrap .nav-toggle{
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

nav>ul {
  display: flex;
  list-style: none;
}
nav>ul>li{
  padding-left: 15px;
}
nav>ul>li>a{
  font-family: 'Mplantin-light', sans-serif;
  letter-spacing: 1px;
}

nav>ul>li:last-child a{
  color: #a7a7a7;
}

.h-wrap .footer-inner {
  display: none;
}



.video-wrapper,
.main-wrapper{
  position: relative;
}


.fixed-panel .video-bg-single,
.fixed-panel .main-wrapper__panel {
  position: fixed !important;
  top: 10vh;
}


.video-bg-single,
.main-wrapper__panel {
  position: inherit;
  width: 100%;
  height: 90vh;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5vh;
  box-sizing: border-box;
  z-index: -1;
}


.video-bg-single:first-child,
.main-wrapper__panel:first-child {
  text-align: center;
  align-items: center;
}

.intro_video_text h2 {
  color: #fff;
  font-family: 'PlantinMTPro-Regular';
  letter-spacing: 2px;
  font-weight: 300;
  font-size: 32px;
}

.intro_video_text p {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 2.38px;
  font-family: 'Univers-ultra-condensed';
  color: #fff;
  margin: 0px 0 -5px 0px;
}

.main-wrapper__panel:first-child  .intro_video_text{
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
.main-wrapper__panel:first-child  .intro_video_text h2 {
  font-size: 60px;
  line-height: 60px;
  font-weight: 500;
  text-shadow: 0px 3px 1px rgb(0 0 0 / 50%);
  margin-bottom: 20px;
}

.main-wrapper__panel:first-child .intro_video_text p {
  font-size: 20px;
  width: 50%;
  margin: auto;
  line-height: 30px;
}


.wwd-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  border-top: 1px solid #D5D5D5;
  padding-top: 50px;
  position: relative;
}


.wwd-wrap:before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 40px);
  background: #d5d5d5;
  left: 50%;
  margin-left: 0px;
  top: 40px;
}

.wwd-wrap-left{
  text-align: center;
  padding: 0 40px;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: center;
  align-items: center;
}

.wwd-wrap-left h4 {
  color: #303030;
  font-family: 'Univers-ultra-condensed';
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
}

.wwd-wrap-left p{
  color: #303030;
  font-size: 32px;
  line-height: 48px;
  margin: 15px auto;
  width: 80%;
}

.wwd-wrap-right {
  padding: 50px 18px;
}

.teams{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
}
.teams div:last-child{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.single-team {
  padding-bottom: 30px;
}
.single-team:last-child{
  padding-bottom: 0;
}
.single-team img{
  width: 100%;
}
.single-team h4 {
  font-family: 'PlantinMTPro-Regular';
  font-size: 20px;
}

.single-team p {
  text-transform: uppercase;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1.15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vide/0.5.1/jquery.vide.min.js"></script>
<!--========================
        ===== sec 1 ====
        =========================-->
<header class="header">
  <div class="container">
    <div class="h-wrap">
      <div class="logo">
        <a href="index.html">
          <img src="https://codeshaper.net/img/common/logo-black.png" alt="logo" />
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="#">Nav1</a></li>
          <li><a href="#">Nav 2</a></li>
          <li><a href="#">Nav 3</a></li>
          <li><a href="#">Nav 4</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>


<!--========================
        ==== sec2 ====
        =========================-->     
<section class="main-wrapper fixed-panel">
  <div class="main-wrapper__panel-wrapper">
    <div class="main-wrapper__panel" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/cover-part1.mp4">
      <div class="container">
        <div class="intro_video_text">
          <h2>The private members’ service for passionate travelers</h2>
          <p>We believe there is a difference between visiting a place and truly getting to know it</p>
        </div>
      </div>
    </div>
    <div class="main-wrapper__panel" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/cover-part2.mp4">
      <div class="container">
        <div class="intro_video_text">
          <p>Relaxation & Traditional Healing</p>
          <h2>Wellness Retreat in Kyoto</h2>
        </div>
      </div>
    </div>
    <div class="main-wrapper__panel" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/cover-part3.mp4">
      <div class="container">
        <div class="intro_video_text">
          <p>Culture and History for the Whole Family</p>
          <h2>Family Trip to Morocco</h2>
        </div>
      </div>
    </div>
    <div class="main-wrapper__panel" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/cover-part4.mp4">
      <div class="container">
        <div class="intro_video_text">
          <p>Adventure in a stunning coastal setting</p>
          <h2>Surf Camp in Cape Town</h2>
        </div>
      </div>
    </div>                        
  </div>
</section>


<!--=======================
        == sec 3 ==
        ========================-->  
<section class="what-we-do sec-padding bg-white">
  <div class="container">
    <div class="sec-title">
      <h4>Heading</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
    </div><!-- what-we-do sec end -->
    <!-- wwd-wrap start-->
    <div class="wwd-wrap">
      <div class="wwd-wrap-left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 

      </div>                    
      <div class="wwd-wrap-right">
        <div class="teams">
          <div class="teams-left">
            <div class="single-team">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            </div>                            
            <div class="single-team">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            </div>                            
            <div class="single-team">

              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
            </div>                            
          </div>             
        </div>
      </div>
    </div>
    <!-- wwd-wrap start-->
  </div>
</section>



<!--================================
        == sec 4 ==
        ==================================-->  
<section class="exceptional-service">
  <div class="bg-white">
    <div class="container">
      <div class="sec-title">
        <h4>Heading</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div><!-- what-we-do sec end -->
    </div>
  </div>

  <div class="video-wrapper">
    <div class="video-wrapper">
      <div class="video-bg-single" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/itinerary-part1.mp4">
        <h1>timeline fade</h1>
      </div>
      <div class="video-bg-single" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/itinerary-part2.mp4">
        <h1>section 2 red</h1>
      </div>
      <div class="video-bg-single" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/itinerary-part3.mp4">
        <h1>section 3 orange</h1>
      </div>
      <div class="video-bg-single" data-vide-bg="https://projects.codeshaper.net/projects/essentialist/assets/video/itinerary-part4.mp4">
        <h1>section 4 purple</h1>
      </div>
    </div>
  </div>
</section>



<!--================================
         ==        sec 5      ==
        ==================================-->
<section class="full-sec">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </div>
</section>

标签： javascriptjqueryjquery-animatefadegsap

javascript - GSAP On 滚动视频和文本淡入淡出动画

问题描述

解决方案

推荐阅读