Jump to content
Search Community

GSAP 3.9.1 with ScrollTrigger,bug?

powerkaifu test
Moderator Tag

Recommended Posts

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。 


    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;


  <section id="section01">
    <div id="date"></div>


  <!-- 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>

    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


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...