Recalculate scrolltrigger on ajax append

[Tigranchik]

Hello, i try to use scrollTrigger on appended items with ajax, but scrolltrigger.refresh() doesn't work, how can i recalculate positions with ajax appended items.

Here's link to website

http://fashion-calendar.sigma-studio.pp.ua/index.php?route=blog/home

[ZachSaucier]

Hey Tigranchik and welcome to the GreenSock forums. It's really hard to debug a live website. If you'd like our help debugging please make a minimal demo of the issue as this post discusses:

 

[akapowl]

Hey Tigranchik,

 

maybe it is just a matter of syntax, if you are using scrolltrigger.refresh()

 

Does

 

ScrollTrigger.refresh();

 

maybe work for you?

 

[Tigranchik]

See the Pen GRZbWjr by DesignStudio (@DesignStudio) on CodePen.

 

But i use ajax to get blocks from another page and append it to current

[ZachSaucier]

The .refresh() call should come in the callback of your AJAX request after the content has been appended to the page. Without code enough to recreate the situation I don't know if we can help you any further.

[Tigranchik]

But .refresh() doesn't work in codepen example 

[akapowl]

 

I think it does work, but it only refreshes the ScrollTriggers, that you have already created.

 

There are no ScrollTriggers set for the fresh appended elements, so you would have to create them first. 

Before that you should probably kill off the old ScrollTriggers, though, so you don't keep apllying new ScrollTriggers over the old again and again.

 

Not sure if I am 100% correct on the above said and if this is the go-to solution, but it works

 

See the Pen f5354d1243728ef70a7b7827e0eb6927 by akapowl (@akapowl) on CodePen.

 

[ZachSaucier]

In addition to what Paul said, you can save a reference to the ScrollTrigger to prevent having to kill and recreate it each time. This just refreshes ones that exist already (which isn't actually necessary in your situation since all the content is positioned after the old ScrollTriggers):

See the Pen bGpPWay?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Tigranchik]

Okay, thank you for helping guys, in any case it doesn't work as we would like, but thanks anyway)

[ZachSaucier]

5 minutes ago, Tigranchik said:

it doesn't work as we would like

What way would you like it to work? 

[Tigranchik]

I tried both examples, but when adding new elements to the page, scrolltrigger does not want to work with them, I don’t know if it is possible to repeat a similar code on the codepen with a ajax request to another page

[ZachSaucier]

Just now, Tigranchik said:

I don’t know if it is possible to repeat a similar code on the codepen with a ajax request to another page

It is. You just have to create/refresh the ScrollTriggers once the content is in the page.

[Tigranchik]

[ZachSaucier]

Please make a minimal demo that recreates the issue if you'd like further help debugging.

[YBP]

Hello everyone !

 

I'm new in this community and I'm trying to adapt some examples to my needs.

this example here is my starting point (thanks to Jack for this working example) : 

 

But I post my question here because of the subject of this topic.

So, I need to :

- load ajax content onLoad (function addBoxes(x)),

- create a scrollTrigger (loaderBoxTigger) on some box (ex: the nth-child(-3)), for next ajax load onEnter

- load ajax content onEnter into the box (ex: the nth-child(-3))  (function addBoxes(x)),

- recalculate the height of container (ok !)

- remove the scrollTrigger  from old nth-child(-3) and applies to the new one in place, for next ajax load onEnter (ok !)

- (try to avoïd the "jumping effect" when refresh and scroll same time)

- do the snap with the new content ... 

- in the future, I want to remove/delete previous loads boxes at the top of the container, for a light infinite scrolling ... 

 

there is my test : 

See the Pen BamVxdL by Ybperhaps (@Ybperhaps) on CodePen.

 

If someone has some big ideas it will be great.

 

Thanks you

Ybp

[GreenSock]

Welcome to the forums, @YBP. 

 

Are you saying that everything works fine as long as you don't scroll WHILE you refresh/resize? 

 

Sorry, but these forums really aren't for people to post lists of requirements so that we can then fix their projects for them (please read the forum guidelines) but we'd be happy to answer any GSAP-specific questions if you can provide a minimal demo. It'd be great if you could keep the minimal demo to well under 50 lines of code (excluding that helper function of course). 

 

If you need paid consulting services, you're welcome to post in the "Jobs & Freelance" forum or contact us directly. 

[YBP]

14 hours ago, GreenSock said:

Welcome to the forums, @YBP. 

 

Are you saying that everything works fine as long as you don't scroll WHILE you refresh/resize? 

 

Sorry, but these forums really aren't for people to post lists of requirements so that we can then fix their projects for them (please read the forum guidelines) but we'd be happy to answer any GSAP-specific questions if you can provide a minimal demo. It'd be great if you could keep the minimal demo to well under 50 lines of code (excluding that helper function of course). 

 

If you need paid consulting services, you're welcome to post in the "Jobs & Freelance" forum or contact us directly. 

 

Thank you for your answer and advice, I understand the idea well and would be careful not to ask too much!

The goal was indeed to describe the entire project so as not to go too far. I'll come back with a more concise example and a clearer question. Thank you again!

[YBP]

Hello all,
My problem seems to come from the "smoothScroll" function function, so neither ajax load nor the loader, but the "content height" value which does not update when I try to refresh scrollTrigger.

I need to try this before the animation skips, so I'll move and adapt my question into the original topic.

Thank you again for your help !