Jump to content
Search Community

Recalculate scrolltrigger on ajax append

Tigranchik test
Moderator Tag

Recommended Posts

 

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

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 !

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...