wpsoul Posted August 3, 2020 Share Posted August 3, 2020 Currently, I am trying to use new Batch Trigger. It works well on page load, but doesn't see elements which were added via ajax. I tried to use something like $.ajax({blablabla, success: function(response){blablabla, ScrollTrigger.refresh(); } but doesn't work. Are any other possible ways? Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2020 Share Posted August 3, 2020 No no, the problem is that you can't set up a ScrollTrigger on elements that don't exist, so a refresh() won't help at all. You should wait until your elements load, THEN create the associated ScrollTriggers. If you still need some help, please create a minimal demo. Happy scrolling! 3 Link to comment Share on other sites More sharing options...
wpsoul Posted August 3, 2020 Author Share Posted August 3, 2020 Ok. What if I want to make some common task. For example, I have infinite loading. So, elements are existed on page, scroll trigger is working as expected. Now, when user scroll down, new elements are added via regular .html() jquery and ajax . https://monosnap.com/file/NUgJMKb2PIWiY2fwm9PZIHzfMvLi0R Is there any method or event which can be used to refresh Scrolltrigger and add new items to it? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 2 hours ago, wpsoul said: Is there any method or event which can be used to refresh Scrolltrigger and add new items to it? Create new ScrollTriggers after you've appended the content to the page. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 Or use the onUpdate function like this pen: See the Pen 514f4d19e03ced84b60dfdacc382adce?editors=0010 by kdbkapsere (@kdbkapsere) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2020 Share Posted August 3, 2020 If you need to have everything batched (I kinda doubt you do, but...) you can just keep a variable for your ScrollTriggers so that you can kill() the old ones and create new ones as you add stuff to your page. The .batch() method returns an Array of ScrollTrigger instances. let triggers; function refreshBatch(elements, vars) { triggers && triggers.forEach(t => t.kill()); // kill all the old ones triggers = ScrollTrigger.create(elements, vars); } refreshBatch(".my-class", { ... }); Just an idea. 1 Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 Ok. But I think that I can't delete all scrilltriggers, I need to delete just for product loop. In current point I will add scroll trigger to ajax function, but i hope it will be some utility in future, because the most common task for batch scroller is different kind of infinity scrolling Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 4, 2020 Share Posted August 4, 2020 15 minutes ago, wpsoul said: I need to delete just for product loop. So keep a reference to that ScrollTrigger (or a reference to the animation that has the ScrollTrigger since you can get the ScrollTrigger from it by using .scrollTrigger) and .kill() just that one. 15 minutes ago, wpsoul said: i hope it will be some utility in future, because the most common task for batch scroller is different kind of infinity scrolling What functionality are you looking to have? We've given you several ways of doing infinite scrolling using ScrollTrigger... Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 Yes, but all of them require to dive inside ajax scripts, which can be very diffucult if I use ready app or page. What I want to have is some refresh function, which can refresh existing trigger, not kill, but just refresh (update scroll trigger items). Please, note, I use batch scroller and it's not regular scrolltrigger as I undestand, so, I am not sure if all methods are working for it https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 4, 2020 Share Posted August 4, 2020 Refreshing works with batching. If you have a specific issue with GSAP please create a minimal demo so we can help you out: 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 31 minutes ago, wpsoul said: What I want to have is some refresh function, which can refresh existing trigger, not kill, but just refresh (update scroll trigger items). I'm struggling to understand what exactly you want (that you can't already do with the existing API). As Zach mentioned, refresh() works with any ScrollTriggers that resulted from a .batch() call. Are you saying you want to be able to CHANGE the elements associated with a ScrollTrigger (like the trigger, endTrigger, or pin)? If so, it's cleaner to just kill() the old one and create a new one. There are a bunch of optimizations internally to make things fast at runtime, and it's non-trivial to just say "hey, use this other element instead" after you've instantiated a ScrollTrigger. I guess I don't understand the challenge you're facing, so like Zach said it'd be super helpful to see a minimal demo so we can wrap our heads around it. 1 Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 27 minutes ago, GreenSock said: I'm struggling to understand what exactly you want (that you can't already do with the existing API). As Zach mentioned, refresh() works with any ScrollTriggers that resulted from a .batch() call. Are you saying you want to be able to CHANGE the elements associated with a ScrollTrigger (like the trigger, endTrigger, or pin)? If so, it's cleaner to just kill() the old one and create a new one. There are a bunch of optimizations internally to make things fast at runtime, and it's non-trivial to just say "hey, use this other element instead" after you've instantiated a ScrollTrigger. I guess I don't understand the challenge you're facing, so like Zach said it'd be super helpful to see a minimal demo so we can wrap our heads around it. here is simple example https://recash.wpsoul.net/ Scroll down page, you will see that all items are loading via ajax. What I want - I need to add batch scroll similar to your demo (simple shift by y axis and opacity), but I don't have possibility to change ajax on site. So, the best for me - will be to have such code which can work separatelly from scripts of site. As I understand correctly, I can do this only if I kill batch scroller each ajax iteration and create it again inside ajax call function Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 No no, you don't need to kill() ScrollTriggers unless you don't want them to work anymore. How exactly are you creating your ScrollTriggers? Zach and I are both really struggling to understand what issue you're describing - can you please create a minimal demo that clearly shows the problem? It isn't helpful to just send us a link to a live site - there are way too many variables at play and it's extremely difficult to isolate things on a live site. We really do want to help. I suspect it's easier than you may think...we just need a minimal demo so that we can get you solid advice. 1 Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 Ok. I implemented it on the same link https://recash.wpsoul.net/ Here you can see, then it's working on load. But when you scroll down and reach ajax point, you will see that it doesn't applied to new items I can't post full code because GSAP is integrated into wordpress application but here is piece of code which triggers batch gsap.set($batchobj, batchinit); scrollargs.onEnter = batch => gsap.to(batch, batchenter); scrollargs.onLeave = batch => gsap.to(batch, batchleave); scrollargs.onEnterBack = batch => gsap.to(batch, batchenterback); scrollargs.onLeaveBack = batch => gsap.to(batch, batchleaveback); ScrollTrigger.batch($batchobj, scrollargs); ScrollTrigger.addEventListener("refreshInit", () => gsap.set($batchobj,batchinit)); inside $batchobj I have jquery element var $batchobj = $(this).closest('.elementor-widget').find('.col_item'); In batchinit - I have merged object from options of my app. it's nothing special, just regular GSAP object of options Now, here is start of ajax $.ajax({ type: "POST", url: translation.ajax_url, data: data, success: function(response){ if (response !== 'fail') { activecontainer.html($(response).hide().fadeIn(1000)); So, ajax takes elements from wordpress and add it to container via simple .html() function What I want is some easy way (the best for me will be not touch ajax function) to add batch scroll to new items also. But I think that there are no easy ways for this Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 4, 2020 Share Posted August 4, 2020 That's still not a minimal demo. What are your start and end values for the ScrollTrigger? It'd be a lot easier for us to help if you just made a representation of your issue in CodePen. Most likely I'd just replace activecontainer.html($(response).hide().fadeIn(1000)); with something like activecontainer.html(response.hide()); // Create new ScrollTrigger(s) for the content that reveal the new content here Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 I don't use start and end options, they are default. In initial animation options I have only {y:15, autoAlpha:0} In batch options I have {y:0, autoAlpha:1} Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 17 minutes ago, wpsoul said: What I want is some easy way (the best for me will be not touch ajax function) to add batch scroll to new items also I'm not sure how it could be any easier. Why can't you just feed your new elements into a ScrollTrigger.batch() call? I must be missing something obvious. Without a minimal demo, I don't think we can offer much more help, @wpsoul. And to be clear, we don't need (nor do we want) your whole WordPress project shoved into a CodePen. The entire point of a minimal demo is to make it as simple as possible so that it helps everyone identify the issue quickly. If you haven't already done so, please watch the video at https://greensock.com/demo We really do want to help. 2 Link to comment Share on other sites More sharing options...
wpsoul Posted August 4, 2020 Author Share Posted August 4, 2020 I can feed new items, but all things in application is optional. I can't just add them to code, it should be conditional and depending on admin settings. Currently, minimal demo is not possible, because ajax is generated via core wordpress functions and GSAP options are generated dynamically via wordpress app. But thank you for trying. Link to comment Share on other sites More sharing options...
GreenSock Posted August 5, 2020 Share Posted August 5, 2020 4 hours ago, wpsoul said: I can feed new items, but all things in application is optional. I can't just add them to code, it should be conditional and depending on admin settings. I'm lost, sorry. If you need to make it conditional, that should be easy with "if" statements. 4 hours ago, wpsoul said: Currently, minimal demo is not possible, because ajax is generated via core wordpress functions and GSAP options are generated dynamically via wordpress app The point of a minimal demo is to break things down into the simplest possible simulation, so it's actually a good thing that you're forced to take WordPress out of the equation. For example, create a demo with a few simple <div> elements the way your page might load. Then have a button that simulates an ajax call that then pushes some more <div> elements into the DOM and see if you can get ScrollTrigger to do what you want. You don't even need to actually do ajax. See what I mean? I guarantee that if you get into this habit when you hit a challenge, you'll get much further. It's not just for our sake in these forums - it's just a really good practice for any developer (at least that's my personal opinion). It will really help clarify things and identify problem areas for yourself (and as a side effect, it'll get you much faster/better answers in forums). But if you just don't want to create a minimal demo, no worries. When you do, we'll be glad to jump back in and help. Good luck with your project! 3 Link to comment Share on other sites More sharing options...
wpsoul Posted August 21, 2020 Author Share Posted August 21, 2020 On 8/5/2020 at 5:17 AM, GreenSock said: The point of a minimal demo is to break things down into the simplest possible simulation, so it's actually a good thing that you're forced to take WordPress out of the equation. For example, create a demo with a few simple <div> elements the way your page might load. Then have a button that simulates an ajax call that then pushes some more <div> elements into the DOM and see if you can get ScrollTrigger to do what you want. You don't even need to actually do ajax. See what I mean? So, I am back to this question. I made demo, it's not the same as my situation but close to it. I have started elements with batch scroll. Then, I add new items via ajax (on demo it's via append on click). As you see, batch scroll doesn't work on new items so I need some simple way to refresh batch scroll. I tried also to duplicate scroll function inside append. But it makes another problem - it makes all items to retrigger. I tried to add scroll trigger only on appended items, but didn't find solution for this First demo See the Pen gOrLveP by igor-sunz (@igor-sunz) on CodePen Second demo with scrolltrigger for only appended items See the Pen PoNbRPm by igor-sunz (@igor-sunz) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Here's one way to do it: See the Pen eYZBMLO?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
wpsoul Posted August 21, 2020 Author Share Posted August 21, 2020 Ok. It's working, but I don't understand how it's working. In first init, you make createBatch(".card"); - it's clear, we add container class for batch but for appended item you use whole block createBatch(newContent) - so, how scrolltrigger know which element we want to use as item in fact that we send whole block of appended items as batchitem? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 The createBatch function just takes a selector or group of elements as its parameter (batch) and applies a new ScrollTrigger.batch to them. So on page load we pass in the class selector, which gets all the ones currently on the page at that time. Once the content is appended we pass in an array of the new elements to the function instead. Make sense? Link to comment Share on other sites More sharing options...
wpsoul Posted August 21, 2020 Author Share Posted August 21, 2020 Ok. It makes sense. But what if I don't know what will be in appended item? For example, sometimes, i will have just items, sometimes, i will have additional wrappers and containers, so, I need to find items in appended Container. I tried find() - but it doesn't work. I updated demo See the Pen PoNbRPm by igor-sunz (@igor-sunz) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Your append is broken CSS wise. But ignoring that, it's because you need to make the el a jQuery object to use find: $(el).find(".card"); 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