Update Scrolltrigger with heights change

[gringo_pablo]

Hi,

 

I'm creating a small logo animation for a client. The idea is simple: the logo is fixed on the left bottom corner of the window, and when you get to the bottom of the page, it scales up to occupy a full section.

 

The animation works, but the problem is that I have two alternative layouts on my page. The user can switch the layout by clicking a button. And the two layouts are not the same heights, so it messes the scrollTrigger... 

 

I tried adding a ScrollTrigger.refresh() each time the user clicks on the switch button, but it didn't solve the problem.

 

Any idea?

 

Thanks

See the Pen LYMKMVy by gringo_pablo (@gringo_pablo) on CodePen

[ryan_labar]

Hi @gringo_pablo

 

You need to call the ScrollTrigger.refresh() after the layout is changed so it can make the proper adjustments:

 

btns[0].addEventListener("click", () => {
  section1.style.display = "block";
  section2.style.display = "none";
  ScrollTrigger.refresh();
});
btns[1].addEventListener("click", () => {
  section1.style.display = "none";
  section2.style.display = "block";
  ScrollTrigger.refresh();
});

 

[gringo_pablo]

That was so obvious... Thanks a lot!!