ScrollTrigger: How to update Variable changes in start/end porsitions

[MD81]

Hello, 

I am using ScrollTrigger to move a fixed nav out of the view  with the footer. I think the mechanism here is not as important as the problem is more about using variables for the trigger positions.  

 

I get the vertical height of my nav first and then use its value for the trigger positioning.

The problem is, the nav will change height depending on its own state (toggled/expanded).

Is there a way I can update the variable vheight? 
 

let box = document.querySelector('#nav');
let vheight = box.offsetHeight;

gsap.registerPlugin(ScrollTrigger);

gsap.to("#nav", {
  scrollTrigger: { 
    trigger: "#footer",
    start: "0 " + vheight,
    end: vheight + " " + vheight,
    scrub: 0,
    // id: "nav-out",
    // markers: true,
  },
  translateY: "-" + vheight,
  ease: "none",
});

Thanks a lot!

[akapowl]

Hey @MD81

 

Maybe using function-based start and end points and a function-based value for your y-translation would help with your problem.

 

let box = document.querySelector('#nav');

gsap.registerPlugin(ScrollTrigger);

gsap.to("#nav", {
  scrollTrigger: { 
    trigger: "#footer",
    start: () => "0 " + box.offsetHeight,
    end: () => box.offsetHeight + " " + box.offsetHeight,
    scrub: 0,
    invalidateOnRefresh: true,
    // id: "nav-out",
    // markers: true,
  },
  y: () => { return - ( box.offsetHeight ) },
  ease: "none",
});

 

 

 

Also you'd have to call 

 

ScrollTrigger.refresh();

 

everytime the state is being toggled.

 

 

 

I don't know if I maybe made any mistake here, though.

 

Providing a minimal demo of what you need always makes it easier for others to help you.

 

Also, I don't think you have to write 'translateY: ...'

You could just use 'y: ...' on the tween instead.

 

 

Maybe this helps. If not, please try providing a reduced demo of your scenario.

Cheers,

Paul

 

[MD81]

@akapowl First of all sorry for not providing a codepen, but the rest of the architecture is a bit complicated so i could not recreate it so quickly.

 

BUT, your solution works like a charm except there is one little problem. Expanding the nav (toggling) is animating in as well. So the refresh of the ScrollTrigger happens already, when the nav is still expanding to its full height. Although the trigger positions are updating, they are still not in their correct positions.

 

Is there a way to delay the ScrollTrigger.refresh(); ?

Thank you so much!!! 

[akapowl]

 

Hard to say, how to exactly do it, without seeing what's going on, but you could essentially put the .refresh() into a delayedCall function

 

var timeout = gsap.delayedCall( 1.0, function() {
	ScrollTrigger.refresh();
});

 

and set the delay to whatever time is needed for your nav to fully expand/collapse.

 

[ZachSaucier]

Or use the onComplete callback of whatever animation you have for the height.

[MD81]

@akapowl many thanks! Works totally fine!

@ZachSaucier Thanks also for your suggestion.