ScrollTrigger Panel snaps after Texts color change

[Haribo 0 Likes (Newbie)]

Hi, I am currently working on a project using ScrollTrigger. As you see in the CodePen, Panels snap to the next Panel after the Texts change color. I expect no snap animation while the Texts are changing color. Also, if it is possible, I would like it to snap to the next panel more quickly. Thanks in Advance!

See the Pen YzjGQxZ by haruka1234 (@haruka1234) on CodePen

[mvaneijgen 1,555 Likes (Superhero)]

Hi @Haribo welcome to the forum!

 

It looks like you're are trying to recreate the Observer plugin, that is made to watch for event (like scrolling) and then do an animation. See 

https://greensock.com/docs/v3/Plugins/Observer

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

[Haribo 0 Likes (Newbie)]

Thank you for your suggestion! Isn't it possible with ScrollToPlugin? I tried it with ScrollToPlugin and it looks good, but only when scrolling down. It seems to work when scrolling up as well, but sometimes it doesn't work.

See the Pen WNKGMRR?editors=1010 by haruka1234 (@haruka1234) on CodePen

 

 

[Rodrigo 5,077 Likes (Superhero)]

Hi,

 

The latest example you provided is working as expected when I scroll up and down 🤷‍♂️, so I can't replicate this sorry.

 

Maybe be more explicit about what is not working, when and how, including details as browser and OS you're seeing the issue.

 

Happy Tweening!

[Haribo 0 Likes (Newbie)]

Thanks @Rodrigo! It happens when I scroll down and up quickly. The scroll goes up and down and does not stop until I reload the page.

[Rodrigo 5,077 Likes (Superhero)]

Hi @Haribo,

 

Yeah I see the issue. It seems that  adding overwrite into the onLeave an onLeaveBack scroll tweens seems to fix the problem:

onLeave: () => {
  if (i !== panels.length - 1) {
    let nextPanelId = `panel-${i + 1}`;
    gsap.to(window,  {
      overwrite: true,
      scrollTo: {
        y: ScrollTrigger.getById(nextPanelId).start + 1,
        autoKill: false
      },
    });
  }
},
  onLeaveBack: () => {
    if (i) {
      let prevPanelId = `panel-${i - 1}`;
      gsap.to(window,  {
        overwrite: true,
        scrollTo: {
          y: ScrollTrigger.getById(prevPanelId).end - 1,
        },
      });
    }
  },

From the DOCS (https://greensock.com/docs/v3/GSAP/Tween/vars) :

overwrite

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[Haribo 0 Likes (Newbie)]

Thanks for your further help @Rodrigo, I added overwrite, and it seems that the bubbling is stopped, but it still doesn't work correctly. When I scroll, sometimes it works but sometimes does not. How it doesn't work is that the scroll goes to the next panel and back. 

 

See the Pen eYjgGvW?editors=1010 by haruka1234 (@haruka1234) on CodePen