Share Posted October 1, 2020 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 Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 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: Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 Hey Tigranchik, maybe it is just a matter of syntax, if you are using scrolltrigger.refresh() Does ScrollTrigger.refresh(); maybe work for you? 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 See the Pen GRZbWjr by DesignStudio (@DesignStudio) on CodePen But i use ajax to get blocks from another page and append it to current Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 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. Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 But .refresh() doesn't work in codepen example Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 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 1 Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 Okay, thank you for helping guys, in any case it doesn't work as we would like, but thanks anyway) Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 5 minutes ago, Tigranchik said: it doesn't work as we would like What way would you like it to work? Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 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 Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 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. Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 Please make a minimal demo that recreates the issue if you'd like further help debugging. Link to comment Share on other sites More sharing options...
Share Posted February 23, 2022 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 More sharing options...
Share Posted February 23, 2022 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 More sharing options...
Share Posted February 24, 2022 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 More sharing options...
Share Posted February 25, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now