How to create triggers on panels that are absolutely positioned and scrolled with timeline?

[xoxoxoxo]

I have a bunch of panels which are absolutely positioned. I'm trying to detect onLeave or onActive flag on these panels so I can change the color of an external element that is position fixed. For ex, menu..

 

How would this work on divs that aren't positioned normally? I have created a minimal demo where I'm iterating through the panels to create triggers and the markers are laid out inaccurately.

 

Basically I'm trying to change the color of the fix div when the panel leaves/enters the viewport.

See the Pen gOwMBvp?editors=1010 by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

Hey nullhook. Since you're controlling the position of your panels a normal ScrollTrigger applied to those panels likely doesn't match up with what you expect. Instead of using a ScrollTrigger for each panel to change your fixed item's color I recommend using the onStart or onComplete of your tween that moves your panels instead.

[xoxoxoxo]

@ZachSaucier Can onStart or onComplete give me yPercent values as it's moving real-time? Ideally, i'd like to be precise when changing fix items' color as it may have spacing relative to the viewport.

 

Another approach I thought of was to use `onUpdate` 

 

[ZachSaucier]

8 minutes ago, xoxoxoxo said:

Can onStart or onComplete give me yPercent values as it's moving real-time?

I don't understand how yPercent is related. Regardless GSAP can do what you need it to do.

 

Please be more minimal and clear with your demo if you'd like additional help.

[xoxoxoxo]

well, the onComplete or onStart only fires when the panel touches the edge of the viewport. I need more granular control and ideally would like to fire events relative to fixed item's position. Is this possible with the event callbacks you mentioned above?

 

i.e, if the fixed item is placed 20px below the viewport's top my onComplete should fire when the panel's end is around 80-90%

 

Here's a minimal demo that changes rand color but it's edge to edge: 

See the Pen OJRRRpo?editors=0010 by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

6 hours ago, xoxoxoxo said:

ideally would like to fire events relative to fixed item's position

The fixed item is always fixed in the same position... So anything that's relative to the top of the viewport + the offset and height of the fixed item is relative to the fixed item. You could easily calculate that value yourself. 

const offset = nav.offsetTop + nav.offsetHeight;

 

With that being said, what makes it more difficult in your situation is that you are taking control over the positioning of each panel. So you need to either

1. calculate where that offset is relative to where your custom control starts each panel's movement
2. calculate what percent the offset is of the total animation for each panel. Then use that percentage to fire off the function once the animation's progress has passed the percentage.

[xoxoxoxo]

I was thinking to get percentage of each panel like this and act based on the percentage if that's what you mean by your second point above?
 

onUpdate: function() {
  const p = this.progress() * 100;
}

 

[ZachSaucier]

41 minutes ago, xoxoxoxo said:

I was thinking to get percentage of each panel like this and act based on the percentage if that's what you mean by your second point above?

Yep. But you'll have to compare that progress value with the progress value of when you want to fire your function. To get that value, you'll need to divide the offset and height of your fixed item by the total distance of your ScrollTrigger.