Update scrolltrigger end point on window resize

[gareth]

I am trying to fix a title until it reaches the section below. It all works fine unless I resize the window which can change the height of the title (if it goes onto more lines) and so the end position is now wrong. 

 

I am using the title height in order to position it correctly : 

 

 var titleHeight = document.querySelector(".project-title").offsetHeight;

Inside scrolltrigger:

  end: "top bottom-=" + titleHeight,

 

How can I update the titleHeight on browser resize ? or is there another way to set this value dynamically during the scroll so it always checking what the current height is? 

 

See the Pen zYLRjxv?editors=1010 by garethworld (@garethworld) on CodePen

[Rodrigo]

Hi,

 

That's because you're defining the height of the text element just one, so it keeps that height every time ScrollTrigger is refreshed on a window resize:

// Height is defined just once in the lifetyme of the page
var titleHeight = document.querySelector(".project-title").offsetHeight;

let st = ScrollTrigger.create({
  trigger: ".intro",
  pin: ".project-title",
  start: "top top",
  end: "top bottom-=" + titleHeight, // <- Always uses the same height
  endTrigger: ".sum",
  pinSpacing: false,
  markers: true,
});

You can use a function based value in the end point so ScrollTrigger calculates the correct point on every refresh:

let st = ScrollTrigger.create({
  trigger: ".intro",
  pin: ".project-title",
  start: "top top",
  end:() => "top bottom-=" + document.querySelector(".project-title").offsetHeight,
  endTrigger: ".sum",
  pinSpacing: false,
  markers: true,
});

Hopefully this clear things up.

Happy Tweening!

[gareth]

thanks! that easy