Jump to content
Search Community

Slight jump in Scroll Trigger Example

Jameshofton test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi There,

 

I have been looking at the codepen Scroll Trigger examples and also been using a similar example on a clients site

 

https://dev.union10.co.uk/ap-live/what-we-do

 

When i scroll down and click the first next screen button, the slide jumps up.  Do you know what would be causing this, i cannot seem to figure it out.  

 

Any help would be appreciated, 

 

Thanks

 

Jim

 

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

Link to comment
Share on other sites

Hi Jim and welcome to the GreenSock forums.

 

This seems to be a combination of factors. The issue is that as soon as the scroll position reaches the end the pin is released, but since the Scroll Trigger instance has a scrub value set to 1 the animation is not yet completed when that happens.

 

One alternative is to change the animation to a timeline and add a short dummy instance at the end of the timeline and make the scrub value smaller, in order to have some extra scrolling space and prevent the jump. The downside of this is that the snap function goes crazy and stops working as expected, so we have to tinker with it a bit. This code seems to work pretty well:

const tl = gsap.timeline({
  paused: true,
  scrollTrigger: {
    trigger: "#panels-container",
    pin: true,
    start: "top top",
    scrub: 0.5,
    snap: {
      snapTo: (1/1.1) / ( panels.length - 1 ),
      duration: {min: 0.1, max: 0.1}
    },
    end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
  }
})
.to(panels, {
  xPercent: -100 * ( panels.length - 1 ),
  ease: "none", duration: 1
})
.to({}, {duration: 0.1}, 1);

Give it a shot and let us know how it goes.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

Hi There,  I tried replacing 

 

const panels = gsap.utils.toArray("#panels-container .panel");
gsap.to(panels, {
  xPercent: -100 * ( panels.length - 1 ),
  ease: "none",
  scrollTrigger: {
    trigger: "#panels-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: {
      snapTo: 1 / ( panels.length - 1 ),
      duration: {min: 0.1, max: 0.1}
    },
    end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
  }
});

 

with 

 

onst tl = gsap.timeline({
  paused: true,
  scrollTrigger: {
    trigger: "#panels-container",
    pin: true,
    start: "top top",
    scrub: 0.5,
    snap: {
      snapTo: (1/1.1) / ( panels.length - 1 ),
      duration: {min: 0.1, max: 0.1}
    },
    end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
  }
})
.to(panels, {
  xPercent: -100 * ( panels.length - 1 ),
  ease: "none", duration: 1
})
.to({}, {duration: 0.1}, 1);

but the whole things breaks, sorry i am not that great at Javascript.  Is there a way to update this codepen

 

 

Thanks Jim

Link to comment
Share on other sites

You don't have to remove the panels constant definition, you have to replace this:

gsap.to(panels, {
  xPercent: -100 * ( panels.length - 1 ),
  ease: "none",
  scrollTrigger: {
    trigger: "#panels-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: {
      snapTo: 1 / ( panels.length - 1 ),
      duration: {min: 0.1, max: 0.1}
    },
    end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
  }
});

With this:

const tl = gsap.timeline({
  paused: true,
  scrollTrigger: {
    trigger: "#panels-container",
    pin: true,
    start: "top top",
    scrub: 0.5,
    snap: {
      snapTo: (1/1.1) / ( panels.length - 1 ),
      duration: {min: 0.1, max: 0.1}
    },
    end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
  }
})
.to(panels, {
  xPercent: -100 * ( panels.length - 1 ),
  ease: "none", duration: 1
})
.to({}, {duration: 0.1}, 1);

Also you can fork and create your own codepen sample, take a look at this:

 

Finally knowing and being able to handle certain degree of javascript is fundamental in web development, unless this is some sort of homework assignment for school, so I'd strongly recommend you to look around for some learning resources like these:

 

https://www.youtube.com/watch?v=PkZNo7MFNFg

 

https://www.youtube.com/watch?v=hdI2bqOjy3c

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Thanks so much for coming back to me, i will watch those videos,  i appreciate you taking the time to send me the links to those.  

 

I have create a pen and added the new code, but it's still jumping, any ideas?

 

See the Pen zYNPoLP by jameshofton (@jameshofton) on CodePen

 

I'll also signup to get a membership. 

 

Thanks James

 

 

Edited by Jameshofton
embed the pen
Link to comment
Share on other sites

I'm traveling at the moment and don't have time to dig into your snapping logic, but let me explain what's likely causing the "jump" you're noticing...

 

Most modern browsers handle scrolling on a totally separate thread (at least scrolling of the main documentElement), so it's not synchronized with the JS thread. When you get to the spot where it's supposed to do pinning, the browser renders things as if it continued scrolling, and THEN it runs the JS thread ad ScrollTrigger says "no, pin that element and set it as position: fixed", and that's where you see the "jump". 

 

The anticipatePin feature won't be of much use in your scenario where you've got the element sitting still at almost the very start of the pinning, and then you suddenly tell it to scroll down (and pin) because there's no momentum for ScrollTrigger to read in advance (the element is sitting still). anticipatePin works by constantly looking at the momentum and trying to calculate if it'll hit the start of pinning on the next "tick". So if your element is sitting still, that ain't gonna help. 

 

You could simply ensure that your initial snapping position is actually SLIGHTLY past where the pinning occurs so that you avoid that whole "going from unpinned to pinned" tricky spot when you need to scroll elsewhere. Like this: 

See the Pen KKayvZE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

  • Like 2
Link to comment
Share on other sites

  • Solution

 

I gave it a shot, too - and since I already thought that it would be related to what @GreenSock explained, I had a slight glimpse that there wouldn't really be a way around it. The idea with the snapping-offset seems to work alright in one direction (when starting at panel one and clicking on a link for a later panel) but when you are on panel 5 and click on a link for an earlier panel you'll notice the same thing still happening at the top of the window.

 

I found one totally hacky-feeling way to prevent the huge 'jumping' in both cases that comes with a trade-off though besides the hackiness of it - and that is when when calling the actual scrollTo-tween in the onComplete of a veeery short other scrollTo-tween. Only tested it on major browsers on Windows though - maybe somebody with a Mac can have a look if this is of interest.

 

The trade-off here is being some of course to be expected jitteriness when clicking on the link for the section that is actually in view at that time. I found it worked best with the initial short scrollTo-tween happening on the x-axis and then sort of reversing that position change in the longer scrollTo-tween.

 

See the Pen 48d5e0f6d1ffbb3989ebdc97d41b3b40 by akapowl (@akapowl) on CodePen

 

 

I would probably not recomment doing it like that, though 🙈

 

Edit:

Something similar would also have to be added to the other scrollTo-tween in the else-statement ( for the links of Home and Map) if this was to be considered.

 

  • Like 3
Link to comment
Share on other sites

I updated my CodePen above to apply a similar fix to the end of the pinned section too (so that it doesn't land exactly at the end of the pinned position), so the snapTo value would look like:

snapTo: value => {
  const snapped = snap(value);
  if (snapped === 0) {
    return 0.0001;
  } else if (snapped === 1) {
    return 0.9999;
  }
  return snapped;
}

See the Pen KKayvZE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that work well for you? 

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