Update trigger when page height changes

[Rayled]

Hi!
When an accordion item is expanded or when text is displayed (the Read More button), the yellow section of the wrap moves down, but the triggers do not. That's why the animation does not work as expected.

 

I understand that it is necessary to use ScrollTrigger.refresh(). But what is the most correct way to do this? It's just that so far I can only think of ideas where one is worse than the other... For example, tracking clicks on the accordion and on a button like "Read More".

Maybe there is a special method for this in GSAP?

See the Pen wBBybyV by Rayled (@Rayled) on CodePen.

[mvaneijgen]

No special method, just wait for the accordion to be expanded and then call ScrollTrigger.refresh()

 

Also note accordions are now build in the HTML with the <details> and <summary> tags, these are supported in almost all browsers and are fully accessible, so I would not roll your own! Is more work and worse UX

 

Hope it helps and happy tweening! 

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

[Rodrigo]

Hi,

 

Indeed the refresh method is the way to proceed in order to update the ScrollTrigger calculations:

document.getElementById("read-more").addEventListener("click", () => {
  document.getElementById("full-text").style.display = "inline";
  document.getElementById("short-text").style.display = "none";
  document.querySelector(".expand-block").classList.add("expanded");
  // Update the trigger points after the document height has been changed
  ScrollTrigger.refresh();
});

Here is a fork of your demo:

See the Pen WbbzwdN by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Rayled]

Hi!
Your option works, thanks! But there is a peculiarity. I am making a site on WordPress, so it is not very reliable to change the theme's js-code, even if I create a child one.

 

I thought about how to do it better and tried to monitor changes in the height of the BODY, as well as the "resize" event. How reasonable do you think this is? Here is a new codepen.

 

ps The important part of the js code is located below the "Function for debounce" comment. Since this code is not tied to elements on the page, the work occurs only with the BODY.

 

 

See the Pen LEEmXXM by Rayled (@Rayled) on CodePen.

 

 

[Rodrigo]

Hi,

 

You can add your custom code to any Wordpress theme/template as far as I know, so there is no  need to change the template's code. Is just about using this function:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

 

We have a specific section in our Installation resources about Wordpress and @Cassie made an excellent job creating the video for installing GSAP. In this section the Youtube video is already in the chapter that covers Wordpress:

https://gsap.com/resources/Wordpress

 

As for the resize event that is actually not needed since ScrollTrigger already has a debounced mechanism to handle browser window resize events, so there is no need to create your own version of that.

 

Hopefully this clear things up

Happy Tweening!