Jump to content
Search Community

Bug on heigth resize caused by collapse element

DettaglioStudio test
Moderator Tag

Recommended Posts

What's the best way to update gsap scrolltriggers if the page has size changes?

Problem: I have a site in nuxt.js 2 and animations with gsap scrolltrigger. The problem is that on the site there is an "FAQ" section with collapsing bootstrap cards (typical question-answer).

If you open one of these cards, the height of the DOM page obviously becomes greater and if you continue to scroll the site the scrolltrigger animations will be triggered on the height of the old DOM (not updated with the height of the open card).

Solution I found but I don't like: Detect the click on the FAQ card, it takes about 200ms to open and I put a method that after clicking on the card, with a setTimeout waits 210ms and then updates with scrolltrigger.refresh()

I was wondering if there was a better best practice...

Link to comment
Share on other sites

 

Hey there!

 

If your elements change height in a way that it affects the page's layout and thus positioning of other elements on the page, there probably is no way around ScrollTrigger.refresh() - that's one of the reasons it is there for. Mostly for performance reasons (and probably also because of file-size) ScrollTrigger can/does not watch all your elements all the time and thus will not adapt to layout changes automatically - all the hard work is done when the page is loaded / on refresh.

 

If you don't want to rely on on the timing of a setTimeout, you could also trigger the .refresh() within a transitionend eventListener (I suppose  the height changes you mentioned happen via a CSS-transition) or even hook things up to MutationObserver (although this can definitely lead to performance issues depending on how many elements you watch, as mentioned in this thread). Both of those should be more reliable than a setTimeout function.

 

And of course if the height changes were animated via GSAP instead, you could alternatively use GSAP's integrated callback system.

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...