Incrementing y value on scroll works downwards, not upwards

[tobiasger_]

I'm trying to create a navigation effect that would show the names of a pages sections fixed at the bottom of the page. Initially all sections except the first one would show at the bottom. On scroll, the sections navigation in the bottom would slide down, leaving only the next section in line visible. When you then reach the next section on scroll, the section navigation item (.section-header--ghost) would latch on to the section being scrolled up from the bottom. The container of all section navigation items (.section-navigations) has overflow: hidden; added to it, so the top navigation item would slide out of the container and the next section in line would slide up. This would create the illusion that you're "latching" onto the sections from the bottom and revealing them as you scroll. The idea would be that the .section-header--ghost would have a solid background, so that the "real" section header (.section-header--real) would appear behind the "ghosts". I've left both the ghost and real headers transparent for this demo though since it might help in understanding what's happening.

The way I solve this is that when .section reaches the bottom of the viewport, all the .section-header--ghost elements are moved upwards with the "y" value during 40px, being the height of the headers. So the value gets incremented 40px upwards for each time the scroll reaches a .section maybe this explanation is unnecessary and it becomes easier to understand with the CodePen provided.

Problem

Everything is working as expected when scrolling downwards. But if I scroll upwards, the .section-header--ghost elements sometimes goes back to 0px, so the movement of the elements are being reset, you could say, instead of the "y" value being decremented by 40px, it gets decremented 40px * total amount of headers. It seems like this problem occurs most of the time, but sometimes when I refresh it works sometimes.

Any idea how to do this in a better way or what might be causing it in the current code?

See the Pen xxWwJzp by tobiasger (@tobiasger) on CodePen

[Cassie]

Hey there!

 

I struggled to completely understand this question - but you have a timeline with multiple scrollTriggers which is likely the problem. Timelines are for sequencing animations. You can add a scrollTrigger to a timeline

like so...

let tl = gsap.timeline({scrollTrigger: {....}})

tl.to(...)
tl.to(...)
tl.to(...)

Or a tween, like so...

gsap.to(".section-navigations", {
  scrollTrigger: {
   ...
  },
  y: 100
});

But adding scrollTriggers to individual tweens which are placed on a timeline isn't something we'd recommend. I don't know what the official line on this is, but logically, you're asking for those tweens to have a relationship to one another but also be controlled separately, so it sounds like conflict city to me.

 

*wait I see what you're trying to do. Incoming...

[Cassie]

This was a little learning for me too. ☺️

So you're using relative values but ScrollTriggered animation values are immediately rendered when the page loads not when the animation happens  so you're getting the wrong values.

You can add immediateRender:false onto your tween to fix it. But this may be a little tidier, I've moved the initial move of the navigation out of the loop and I'm animating a wrapper element instead of each element.

See the Pen GRxpPOJ?editors=0111 by GreenSock (@GreenSock) on CodePen

Hope this helps!

[tobiasger_]

This is amazing! Thank you so much @Cassie!