[JS-GSAP] toggleActions (ex카카오뱅크)

[JS-GSAP] toggleActions (ex카카오뱅크)

2023. 1. 13. 11:24ㆍJavascript

728x90

1. toggleActions

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {margin: 0;padding: 0;}
    section { height: 1200px; display: flex; justify-content: center; align-items: center;  }
    .section0 { background-color: black; }
    .section1 { background-color: lightgoldenrodyellow; }
    .section2 { background-color: darkseagreen; }
    img { width: 500px; }
  </style>
</head>

<body>
<div>
  <section class="section0"></section>
  <section class="section1">
    <img src="https://kakaobank.com/static/images/web/renewal/main-savings.png" alt="">
  </section>
  <section class="section2">
    <img src="https://kakaobank.com/static/images/web/renewal/main-foreignRemittance-new.png" alt="">
  </section>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
  // toggleActions: onEnter, onLeave, onEnterBack, onLeaveBack
  // action: play, pause, resume, reset, restart, complete, reverse, none

  gsap.from('.section1 > img', {
    x: -300,
    duration: 1.5,
    opacity: 0,
    scrollTrigger: {
      trigger: '.section1 > img',
      start: 'top 80%',
      end: 'bottom 20%',
      toggleActions:  'play none reverse reset'
    }
  })

  gsap.from('.section2 > img', {
    y: -300,
    duration: 1.5,
    opacity: 0,
    scrollTrigger: {
      trigger: '.section2 > img',
      toggleActions:'restart none none none'
    }
  })


</script>
</body>
</html>

카카오뱅크

카카오뱅크 이용안내, 상담하기, 소비자보호, 증명서발급, 회사소개, 인재채용, (주)카카오뱅크

www.kakaobank.com