Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wpsoul

BatchTrigger and Ajax

Recommended Posts

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

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!

  • Like 3
Link to comment
Share on other sites

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

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

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. 

  • Like 1
Link to comment
Share on other sites

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

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

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

Refreshing works with batching. If you have a specific issue with GSAP please create a minimal demo so we can help you out:

 

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

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. 

  • Like 1
Link to comment
Share on other sites

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

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

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

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. 

  • Like 2
Link to comment
Share on other sites

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

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! 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...
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

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

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

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

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

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