GSAP ScrollTrigger implementation on Infinitely Scrolling container is not seamless

[Krishnakant]

Hi,

 

I have an infinitely scrolling container which appends elements to the container, after an ajax call.

 

I am trying to fix 2 issues here, as you can see on scrolling to the bottom of the container.

1. I have the even and odd cards being animated separately, but on appending new elements to the container the cards do not animate as expected and go in reverse direction. Also, as we load more and more elements in the container, the movement of cards slows down.

 

2. On appending elements from next page, some times the cards get overlapped, resulting in not so seamless experience.

 

Please help me to fix these issues with this implementation of ScrollTrigger.

 

Thank you. 

 

 

See the Pen dywmaXo by designjuice (@designjuice) on CodePen

[Rodrigo]

Hi,

 

I think is better to use ScrollTrigger to get the new elements instead of using the intersection observer:

See the Pen YzOzjbL by GreenSock (@GreenSock) on CodePen

 

The idea is basically to attach a ScrollTrigger instance to the body tag and then when you're close to the end of the document bring in the new elements in order to add them to the DOM. There might not be a need for the ScrollTrigger Batch approach in your case or maybe there is, you'd be the judge of that.

 

Hopefully this helps.

Happy Tweening!

[Krishnakant]

Hi,

Thank you so much for replying back. However, with limited knowledge on ScrollTrigger and batch I couldn't achieve the desired output.

 

I have updated the codepen to use ScrollTrigger to append elements when scrolled to the end of document, however the ajax call is being executed for every added elements and not showing paginated (10 per page) results as it was before. Also, the animation for odd and even elements is not working at all.

 

I am trying to infinitely add set of elements which are paginated, upon scrolling and translate odd and even element after they are being added throughout (without slowing down the translation effect which is observed when document is scrolled after say 30 elements, i.e. 3rd page is loaded) similar to this - https://www.bt.com/about/annual-reports/2020summary/#stories

 

Can you help me with this to get desired outcome?

[Rodrigo]

Hi,

 

In your codepen demo you are not creating the ScrollTrigger animations for the new elements being added. If you check the demo I posted you can see that after adding the new elements to the DOM the code creates the new ScrollTrigger instances using ScrollTrigger batch:

function createBatch(target) {
  ScrollTrigger.batch(target, {
    //interval: 0.15,
    onEnter: show,
  });
}

const newContent = $.parseHTML(ajaxitem);
jQuery(".container").append(newContent);

// Create a new batch just for the new content
createBatch(newContent);
ScrollTrigger.refresh();

You can add the new elements with a custom class and create the batch just for those targets.

 

Unfortunately we don't have the time resources to provide general consulting or create custom solutions for our users in these free forums.

 

If you check the ScrollTrigger docs for batch you'll see some examples there that can help you as well:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

I'd recommend you to start by adding some elements manually with a button or something like that in order to make the whole add-elements/create-batch/refresh-ScrollTrigger flow working first and then add the ajax part.

 

Hopefully this helps.

Happy Tweening!