Adding New Section on button click while scroll trigger is already intial in some section giving blank space as well sometime below section animation broked.

[Sandeep Choudhary]

Hi guys hope you are doing good.
Iam facing issue while working with my project iam trying to add dynamic section to existing one which already have scroll trigger and animation executed new section too have animation. when i add this new section its break animation of below section and add blank spacing as well in my production project it stop the below animation too.
i have some sort of builder customizer  so that when i changed content too it first removed the section and then append it the same position. e.g.. if section is placed over 3rd position then after content change it again added on same position when its added it give blank space for below section which have scroll trigger initialized as well stop the animation performed on it.  I can't  kill all trigger and the reinitialize all section again as it will compromise the performance by removing and adding animation for all section again and again.

 

Please note - animation only break section below  the newly added section. Tried with refresh each scrolltrigger again but its not worked. using forcefully refresh [ScrollTrigger.refresh(true);] 

 

Thanks in advance for any help or suggestion
 

See the Pen jEOVKbK by SandeepChoudhary (@SandeepChoudhary) on CodePen.

[Rodrigo]

Hi,

 

I think the problem lies in the fact that you already have the ScrollTrigger instances that you created in the loop. Those are already created and their start/end positions set as well. When you add a new element you're creating a layout shift and also a new ScrollTrigger instance that sits between the first and third section, but the ScrollTrigger instances of those sections are not aware of that new ScrollTrigger instance between them, so their start/end points are the same. You also have to tell ScrollTrigger that the previous order of the ScrollTriggers has changed since before it was:

• Section One
• Section Three
• Section Five

Now the order is:

• Section One
• Section New
• Section Three
• Section Five

For that we have the sort method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Basically that tells ScrollTrigger to order the ScrollTrigger according to their positions in the DOM:

buttonClick.addEventListener("click", function () {
  let newSection = document.createElement("div");
  newSection.classList.add("section-wrapper");
  newSection.classList.add("section-height");
  newSection.classList.add("bg-primary-5");
  newSection.classList.add("new-sec-app");
  newSection.innerHTML =
    '<div class="scaleBox bg-secondary-3">Section New</div>';
  appendSection.insertAdjacentElement("afterend", newSection);
  let newSec = document.querySelector(".new-sec-app");
  let getScaleData = newSec.querySelector(".scaleBox");
  let newScrollTime = gsap.timeline({
    scrollTrigger: {
      trigger: newSec,
      start: "top top",
      end: `+=100%`,
      scrub: 1.5,
      pin: true,
      markers: true,
      id: 'new'
    }
  });
  newScrollTime.to(getScaleData, { scale: 0.2 });
  ScrollTrigger.refresh(true);
  ScrollTrigger.sort();
});

Here is a fork of your demo:

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

 

Hopefully this helps

Happy Tweening!