GSAP-スクロールアクション

Created by ippei (#19)

<body>
  <div class="gsap">
    <h2>GSAP</h2>
    <h1>ScrollTrigger</h1>
  </div>

<div class="ttl" data-scroll>
    <h2 class="ttl__clip">ScrollTrigger</h2>
    <span class="ttl__clip__line"></span>
  </div>

<section class="scroll"  data-scroll>
    <div class="scroll__wrap">
      <p class="scroll__x">GSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLLGSAPSCROLL</p>
    </div>
  </section>

<div class="scroll__bg"  data-scroll>
    <span class="scroll__cover"></span>
    <div class="ttl mb">
      <h2 class="ttl__clip">ScrollTrigger</h2>
      <span class="ttl__clip__line"></span>
    </div>
    <p class="fade__img"  data-scroll><img src="https://images.unsplash.com/photo-1551292831-023188e78222?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80" alt=""></p>
  </div>

$color-bg:linear-gradient(133deg, rgba(250,246,246,1) 0%, rgb(223, 223, 223) 50%, rgb(196, 196, 196) 100%);
$color-bg02: linear-gradient(133deg, rgb(70, 70, 70) 0%, rgb(19, 19, 19) 50%, rgb(0, 0, 0) 100%);
$color-white: #fff;

@mixin media($breakpoint:md){
  @media #{map-get($breakpoint-up,$breakpoint)}{
    @content;
  }
}

$breakpoint-up: (
'bp760':'screen and(max-width:760px)',
)!default;

body {
  font-family: 'Roboto', sans-serif;
  background: $color-bg;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.data-scroll-container {
  overflow-x: hidden;
  min-height: 100vh;
}

/*ファーストビュー*/
.gsap {
  height: 100vh;
  text-align: center;
  padding-top: 40vh;
  h2 {
    font-size: 2rem;
    font-weight: 500;
    overflow: hidden;
  }
  h1 {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    overflow: hidden;
  }
}

/*タイトル表示*/
.mb {
  margin-bottom: 40%;
  @include media(bp760) {
    margin-bottom: 5%;
  }
  h2 {
    color: $color-white;
  }
  span {
    background-color: $color-white;
  }
}
.ttl {
  display: table;
  margin-left: 5%;
  position: relative;
  &__clip {
    position: relative;
    display: inline-block;
    font-size: clamp(3rem, 4vw ,7rem);
    transition: clip-path .6s cubic-bezier(0.18, 0.06, 0.23, 1) .2s;
    clip-path: inset(0 100% 0 0);
    padding: 0 12px 8px 0;
    &__line {
      height: 2px;
      background-color: #000;
      width: 0;
      display: block;
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      &.slid__open {
        width: 100%;
        opacity: 1;
        transition: all .4s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
      }
    }
    &.slid__open {
      clip-path: inset(0);
    }
  }
}

/*背景テキスト*/
.scroll {
  overflow: hidden;
  padding-top: 20%;
  padding-bottom: 20%;
  &__wrap {
    p {
      font-size: clamp(8rem, 15vw, 16rem);
      font-weight: 900;
      color: #ebe9e9;
      opacity: 0.1;
      -webkit-text-stroke: 1px #000;
    }
  }
}

/*背景徐々に表示*/
.scroll__bg {
  position: relative;
  padding: 32px 0 48px;
  display: flex;
  justify-content: space-between;
  @include media(bp760) {
    display: block;
    padding: 15% 0;
  }
  .scroll__cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: $color-bg02;
    transform-origin: left;
    width: 100%;
    height: 100%;
  }
  .fade__img {
    width: 50%;
    margin-right: 5%;
    margin-top: 10%;
    @include media(bp760) {
      margin-left: 5%;
      margin-right: 0;
      width: 90%;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}

//一文字ずつしたから表示
.text__up {
  display: flex;
  justify-content: center;
  margin: 15% auto 16px;
  overflow: hidden;
  span {
    display: block;
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: 0.04em;
  }
  &__02 {
    margin: 0 auto 25%;
    span {
      font-size: 1.8rem;
    }
  }
}

/*画像が下から表示される*/
.flower {
  padding: 22% 0;
  background-color: $color-white;
  &__img {
    width: 58.04688%;
    position: relative;
    &:nth-child(even) {
      margin: 15% 0 15% auto;
    }
    &__02 {
      width: 41.25%;
    }
    &__03 {
      width: 48.125%;
      margin: {
        left: 8%;
      };
    }
  }
}

.grid__img {
  position: relative;
  display: block;
  background-color: $color-white;
  padding-top: 50%;
  padding-bottom: 20%;
  &__item {
    position: absolute;
    display: block;
    overflow: hidden;
    &::after {
      content: "";
      width: 100%;
      height: 102%;
      background-color: $color-white;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
      transform: translate3d(0, 0%, 0);
    }
    &.js-after {
      &::after {
        transform: translate3d(0, -102%, 0);
      }
      img {
        opacity: 1;
        transform: scale(1);
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      transform: scale(1.3);
      transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
      object-fit: cover;
    }
    &__01 {
      top: 0;
      left: 8.28125%;
      width: 25.46875%;
    }
    &__02 {
      width: 42.8125%;
      left: -9.0625%;
      top: 26.25%;
      height: 35%;
    }
    &__03 {
      width: 27.5%;
      left: 35%;
      top: 0;
      height: 74%;
    }
    &__04 {
      width: 25.46875%;
      right: 10.78125%;
      top: 6.58824%;
    }
    &__05 {
      width: 36.4%;
      right: 0;
      top: 33.17647%;
    }
  }
}

.js-fadeup {
  position: relative;
  overflow: hidden;
  &::after {
    content: "";
    width: 100%;
    height: 102%;
    background-color: $color-white;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
    transform: translate3d(0, 0%, 0);
  }
  &.js-after {
    &::after {
      transform: translate3d(0, -102%, 0);
    }
    img {
      opacity: 1;
      transform: scale(1);
    }
  }
  img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform: scale(1.3);
    transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
  }
  }

// 背景テキストがスクロールに合わせて左へ動く
gsap.fromTo( '.scroll__x', {
    x: "-15.1797px",
},
{
  x: '-1603.18px',
  scrollTrigger: {
    trigger: '.scroll',
    start: 'top center+=300' ,
    end: 'bottom top', 
    scrub: 0.8,
  }
}
);

// 背景が徐々に表示
gsap.fromTo('.scroll__cover', {
    x: "0",
    scaleX: 0,
    scaleY: 1,
},
{
  x: '0',
  scaleX: 1,
  scrollTrigger: {
    trigger: '.scroll__bg',
    start: 'top-=350 center+=100',
    end: 'bottom-=400 center+=100',
    scrub: 0.5,
    once: true,
  }
}
)

// テキストを徐々に表示させる
gsap.registerPlugin(ScrollTrigger);

const ttl__clips = document.querySelectorAll('.ttl__clip');

ttl__clips.forEach((ttl__clip, index) => {
  gsap.to(ttl__clip, {
    scrollTrigger: {
      trigger: ttl__clip,
      start: 'top-=300 center+=100',
      end: 'top top-=100',
    }
  });

ScrollTrigger.create({
    trigger:ttl__clip,
    id: index+1,
    start: 'top center+=300',
    end: 'top top-=100',
    once: true,
    toggleClass: {
      targets: ttl__clip,
      className: 'slid__open',
    },
  });
});

const ttl__clip__lines = document.querySelectorAll('.ttl__clip__line');

ttl__clip__lines.forEach((ttl__clip__line, index) => {
  gsap.to(ttl__clip__line, {
    scrollTrigger: {
      trigger: ttl__clip__line,
      start: 'top center+=300',
      end: 'top top',
    }
  });

ScrollTrigger.create({
    trigger:ttl__clip__line,
    id: index+1,
    start: 'top center+=300',
    end: 'top top',
    once: true,
    toggleClass: {
      targets: ttl__clip__line,
      className: 'slid__open',
    },
  });
});

//一文字ずつしたから表示
const text__ups = document.querySelectorAll('.text__up__js');

text__ups.forEach((text__up, i) => {
    gsap.fromTo(text__up, {
      opacity:0.1,
      y: '110%',
    },
    {
      opacity:1,
      y: 0,
      duration: 0.7,
      delay: i * 0.03,
      scrollTrigger: {
        trigger: '.text__up',
        start: 'top center+=300',
        end: 'top center+=300',
        once: true,
      }
    },
    )
});

//下からフェードイン
const fadeUps = document.querySelectorAll('.fade__img');

fadeUps.forEach((fadeUp, index) => {
  gsap.fromTo(fadeUp, {
    autoAlpha: 0,
    y:20,
  },
  {
    autoAlpha: 1,
    y: 0,
    scrollTrigger: {
      trigger: fadeUp,
      start: 'top center+=100',
      end: 'top top',
      // toggleActions: "play pause resume reverse",
    }
  });
  ScrollTrigger.create({
    trigger: fadeUp,
    id: index+1,
    start: 'top center+=100',
    end: 'top top',
    once: true,
    // toggleActions: "play pause resume reverse",
  });
})

// 画像を下から表示させる
const jsFadeUps = document.querySelectorAll('.js-fadeup');

jsFadeUps.forEach((jsFadeUp, index) => {
  gsap.to(jsFadeUp, {
    scrollTrigger: {
      trigger: jsFadeUp,
      start: 'top-=200 bottom',
      end: 'bottom top',
      scrub: true,
    }
  });

ScrollTrigger.create({
    trigger: jsFadeUp,
    start: 'top-=200 bottom',
    end: 'bottom top',
    id: index+1,
    once: true,
    toggleClass: {
      targets: jsFadeUp,
      className: 'js-after',
    }
  })
})

const gridItems = document.querySelectorAll('.grid__img__item');

gridItems.forEach((gridItems, index) => {
  gsap.to(gridItems, {
    scrollTrigger: {
      trigger: gridItems,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true,
    }
  });

ScrollTrigger.create({
    trigger: gridItems,
    start: 'top bottom',
    end: 'bottom top',
    id: index+1,
    once: true,
    toggleClass: {
      targets: gridItems,
      className: 'js-after',
    }
  })
})