带有单独 (h1:after) 伪动画的 GSAP 淡入淡出部分

如何解决带有单独 (h1:after) 伪动画的 GSAP 淡入淡出部分

我对 GSAP 库很陌生，所以请耐心等待！我编写了 this 代码，正如您所看到的，当显示不同的部分时，h1:after 中的一条线正在增长，到目前为止一切顺利..

我想要实现的是将 this 预制代码与淡入淡出部分时间线 一起与我的 h1:after 行增长代码一起使用.

到目前为止我得到了这个代码：

let sections = gsap.utils.toArray("section"),currentSection = sections[0];

gsap.defaults({overwrite: 'auto',duration: 1});

// stretch out the body height according to however many sections there are. 
gsap.set("body",{height: (sections.length * 100) + "%"});

// create a ScrollTrigger for each section
sections.forEach((section,i) => {
  ScrollTrigger.create({
    // use dynamic scroll positions based on the window height (offset by half to make it feel natural)
    start: () => (i - 0.5) * innerHeight,end: () => (i + 0.5) * innerHeight,scrub: true,markers: true,toggleActions: "play reset play reset",// when a new section activates (from either direction),set the section accordingly.
    onToggle: self => self.isActive && setSection(section)


  });

      //console.log("scroll: ",section.className,i);

  
});

function setSection(newSection) {
  if (newSection !== currentSection) {
    /*const newClass = newSection.className.match(/\d+/g)[0];
    const currClass = currentSection.className.match(/\d+/g)[0];
    console.log(newClass,currClass);
    const cssName = " .inner .text";*/
    
    var tl = gsap.timeline()
        tl.to("h1",{y:-30,autoAlpha:0,duration:0.3})
        tl.to(currentSection,{autoAlpha:0,duration:0.5});
        //to(CSSRulePlugin.getRule( ".pn" + currClass + cssName + " h1:after"),{cssRule: { width: "0px",opacity: 0}},{duration:2});
    
    
    //".pn" + currClass + " 
    
    var tl = gsap.timeline()
        tl.to(newSection,{autoAlpha:1,duration:0.5})   
        tl.to("h1",autoAlpha:1,duration:.3});
        //tl.to(CSSRulePlugin.getRule( ".pn" + newClass + cssName + " h1:after"),{cssRule: { width: "100px",opacity: 1}},{duration:2});


    currentSection = newSection;  
    //line(currentSection);

  }
}
 
const cssname = ".inner .text ";
const inner = gsap.utils.toArray(cssname + ' h1');

inner.forEach(el => {
  const rule = CSSRulePlugin.getRule(cssname +`${el.tagName}:after`);
  console.log(cssname +`${el.tagName}:after`);
  console.log(rule);
  gsap.to(rule,2,{
    scrollTrigger: {
      trigger: el,scrub: 1,// smooth scrubbing,takes 1 second to "catch up" to the scrollbar

    },cssRule: {
      width: "100px"
    },repeat: 0,duration: 5,});
});

html,body {
  height: 100%;
}
body { 
  background-color: #000;
  font-size: 18px;
  font-weight: 300;
}








.panel.align-top {
  align-items: flex-start;
}

.panel h1 {
  font-size: 1.8em;
  color: white;
  font-weight: 300;
  margin: 0 auto;
}
.panel.description {
  padding-bottom: 60px;
}
.panel p,.panel li {
  color: black;
  font-weight: 400;
  text-align: left;
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 0.3em 0 1em 0;
}
.panel p strong,.panel li strong {
  color: white;
  font-weight: 400;
}
.panel p code,.panel li code {
  background-color: rgba(255,255,0.15);
  padding: 2px 4px;
  border-radius: 5px;
}
.panel li {
  margin: 0;
}
.gray {
  background-color: #777;
  background-image: radial-gradient(circle at 47% 14%,rgba(205,205,0.04) 0%,0.04) 43%,transparent 43%,transparent 100%),radial-gradient(circle at 35% 12%,rgba(215,215,0.04) 4%,transparent 4%,radial-gradient(circle at 1% 35%,rgba(24,24,0.04) 37%,transparent 37%,radial-gradient(circle at 21% 1%,rgba(0,0.04) 26%,transparent 26%,radial-gradient(circle at 23% 82%,rgba(249,249,0.04) 60%,transparent 60%,radial-gradient(circle at 11% 54%,rgba(251,251,0.04) 23%,transparent 23%,radial-gradient(circle at 69% 68%,rgba(234,234,0.04) 10%,transparent 10%,linear-gradient(90deg,#777,#606060);
}
.blue {
  background-color: #2c7ad2;
  background-image: radial-gradient(circle at 47% 14%,#2c7ad2,#1568c6);
}
.orange {
  background-color: #e77614;
  background-image: radial-gradient(circle at 46% 40%,rgba(228,228,0.06) 0%,0.06) 13%,transparent 13%,radial-gradient(circle at 11% 41%,rgba(198,198,0.06) 19%,transparent 19%,radial-gradient(circle at 52% 23%,rgba(14,14,0.06) 69%,transparent 69%,radial-gradient(circle at 13% 85%,rgba(148,148,0.06) 44%,transparent 44%,radial-gradient(circle at 57% 74%,rgba(232,232,0.06) 21%,transparent 21%,radial-gradient(circle at 59% 54%,rgba(39,39,0.06) 49%,transparent 49%,radial-gradient(circle at 98% 38%,rgba(157,157,0.06) 24%,transparent 24%,radial-gradient(circle at 8% 6%,rgba(60,60,0.06) 12%,transparent 12%,#ff7600,#ff7600);
}

.red {
  background-color: #c82736;
  background-image: radial-gradient(circle at 19% 90%,rgba(190,190,0.04) 17%,transparent 17%,radial-gradient(circle at 73% 2%,rgba(78,78,0.04) 94%,transparent 94%,radial-gradient(circle at 45% 2%,rgba(18,18,0.04) 55%,transparent 55%,radial-gradient(circle at 76% 60%,rgba(110,110,0.04) 34%,transparent 34%,radial-gradient(circle at 68% 56%,rgba(246,246,0.04) 16%,transparent 16%,radial-gradient(circle at 71% 42%,rgba(156,156,0.04) 47%,transparent 47%,radial-gradient(circle at 46% 82%,rgba(247,247,0.04) 39%,transparent 39%,radial-gradient(circle at 50% 47%,rgba(209,209,0.04) 45%,transparent 45%,#e53949,#cc2232);
}

.purple {
  background-color: #8d3dae;
  background-image: radial-gradient(circle at 47% 14%,#8d3dae,#8d3dae);
}
.green {
  background-color: #28a92b;
  background-image: radial-gradient(circle at 46% 40%,#28a92b,#10a614);
}

html,body {
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  font-family: "Signika Negative",sans-serif,Arial;
}

.panel {
    width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

h1,h2,p,li {
  max-width: 800px;
}

/* HEADER */
header {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 6px 10px 10px 10px;
  border-bottom-right-radius: 26px;
  z-index: 100;
  background-color: rgba(0,0.5);
}

/* HEADINGS */
.header-section {
  padding: 0 15px;
  text-align: center;
  margin: 40vh auto 50vh;
}

/* SCROLL DOWN */ 
.scroll-down {
  position: absolute; 
  bottom: 30px;
  left: 50%;
  transform: translate(-50%,0);
  color: black;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  overflow: visible;
}
.scroll-down .arrow {
  position: relative;
  top: -4px;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
  background-size: contain;
}











.panel {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.panel h1 {
  font-size: 1.8em;
  color: black;
  font-weight: 300;
  margin: 0 auto;
  z-index:5;
}

section:not(.first) {
  opacity: 0;
  visibility: hidden;
} 


.inner .text h1{
  position: relative;
  display: inline;
  padding-right: 0.5em;
}

.inner .text h1:after {
  content: " ";
  position: absolute;
  border-bottom: 3px solid green;
  width: 0px;
  margin: 30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/CSSRulePlugin.min.js"></script>

<section class="first panel pn0 blue">
  <h1>Fading Transitions(h1:after grow line)</h1>
  <div class="scroll-down">Scroll up or down<div class="arrow"></div>
  </div>
</section>
<section class="panel pn1 red">
  <div class="inner">
    <div class="text">

      <h1>Photoshop 2
        <h1 />
    </div>
  </div>
</section>
<section class="panel pn2 orange">
  <div class="inner">
    <div class="text">

      <h1>Photoshop 3
        <h1 />
    </div>
  </div>
</section>
<section class="panel pn3 purple">
  <div class="inner">
    <div class="text">

      <h1>Photoshop 4
        <h1 />
    </div>
  </div>
</section>
<section class="panel pn4 green">
  <div class="inner">
    <div class="text">

      <h1>Photoshop5
        <h1 />
    </div>
  </div>
</section>

<header>
  <a href="https://greensock.com/scrolltrigger">
    <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a>
</header>

有些东西显然不起作用 - 我只是不明白是什么。如果有人能指出我正确的方向，我将不胜感激！

带有单独 (h1:after) 伪动画的 GSAP 淡入淡出部分

如何解决带有单独 (h1:after) 伪动画的 GSAP 淡入淡出部分

相关推荐