Jump to content
Search Community

powerkaifu

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by powerkaifu

  1. GSAP 3.9.1 version with ScrollTrigger,
    when I try to ScrollTrigger's onEnter or onLeaveBack function not working for me,

    But with GSAP 3.8.0 is fine ok。 

     

    <style>
        section {
          height: 100vh;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: flex-start;
        }
    
        section:nth-child(odd) {
          background: #ffa;
        }
    
        section:nth-child(even) {
          background: #eee;
        }
    
        #date {
          height: 5rem;
          display: none;
          font-size: 5rem;
        }
      </style>
    
    
      <section></section>
    
      <section id="section01">
        <div id="date"></div>
      </section>
    
      <section></section>
    
      <!-- not working 3.9.1 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
      <!-- no problem 3.8.0 -->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.js'></script>
      <script src="./js/ScrollTrigger.js"></script>
    
        <script>
        gsap.registerPlugin(ScrollTrigger)
        const date = {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1,
          day: new Date().getDate()
        }
    
        gsap.from(date, {
          scrollTrigger: {
            trigger: '#section01',
            start: 'top center',
            end: 'bottom center',
            toggleActions: 'play none none reset',
            onEnter() {
              $('#date').css({ display: 'block' })
            },
            onLeaveBack() {
              $('#date').css({ display: 'none' })
            },
            markers: true
          },
          onUpdate() {
            $('#date').text(`${date.year.toFixed(0)} / ${date.month.toFixed(0)} / ${date.day.toFixed(0)}`)
          },
          year: 0,
          month: 0,
          day: 0,
          duration: 1
        })
      </script>

     

×
×
  • Create New...