Jump to content
Search Community

ScrollTrigger Panel snaps after Texts color change

Haribo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • Haribo changed the title to ScrollTrigger Panel snaps after Texts color change

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!

Link to comment
Share on other sites

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!

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