Jump to content
GreenSock

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

BatchTrigger and Ajax

Recommended Posts

Ok. It's working, I changed demo. Not sure why it's not working on my production build. Maybe, some syntax error, will try to change. 

 

Anyway, is there any possibility to do this without trigger new batchscroll on new items? Something like on my first demo with 

ScrollTrigger.refresh();
Link to comment
Share on other sites

Long ago Jack provided a function to do that :) 

 

 

Link to comment
Share on other sites

  • 1 year later...
On 8/21/2020 at 5:30 PM, ZachSaucier said:

Here's one way to do it:

 

 

 

Hi @ZachSaucier and  @wpsoul

I need to do that same thing you do but with pure Javascript not Jquery.

Here's my code but ScrollTrigger doesn't get the new items injected:

 

    axios.post(ajaxurl, form_data)
      .then(function (response) {
        // Inject HTML from Ajax
        // <li><div class="card">...</div></li> <li><div class="card">...</div></li> ...
        containerEl.insertAdjacentHTML('beforeend', response.data.html);

        let parser = new DOMParser();
        let htmlDoc = parser.parseFromString(response.data.html, 'text/html');
        let newItems = htmlDoc.querySelectorAll(".card");

        ScrollTrigger.batch(gsap.utils.toArray(newItems), {
          onEnter: elements => {
            gsap.from(elements, {
              autoAlpha: 0,
              y: 60,
              stagger: 0.15
            });
          },
          once: true,
        });

      })

Any idea? Thanks

Link to comment
Share on other sites

@Black Ducas if you'd like some help, please provide a minimal demo and we'd be happy to answer any GSAP-specific questions.

Link to comment
Share on other sites

Your newItems don't look like they would be the same as the ones your inserting. Maybe try parsing first, then append what you've parsed.

  • Like 1
Link to comment
Share on other sites

11 minutes ago, OSUblake said:

Your newItems don't look like they would be the same as the ones your inserting. Maybe try parsing first, then append what you've parsed.

 

Tried this with no luck (same as before, ScrollTrigger doesn't trigger the animation on new items)

 

    axios.post(ajaxurl, form_data)
      .then(function (response) {

        // Parse
        let parser = new DOMParser();
        let htmlDoc = parser.parseFromString(response.data.html, 'text/html');
        let newItems = htmlDoc.querySelectorAll(".card");

        // Inject HTML as string
        // <li><div class="card">...</div></li> <li><div class="card">...</div></li> ...
        containerEl.insertAdjacentHTML('beforeend', htmlDoc.body.innerHTML);
      
        // ScrollTrigger
        ScrollTrigger.batch(gsap.utils.toArray(newItems), {
          onEnter: elements => {
            gsap.from(elements, {
              autoAlpha: 0,
              y: 60,
              stagger: 0.15
            });
          },
          once: true,
        });

      })

 

 

Link to comment
Share on other sites

I can't tell exactly, but 

 

let newItems = htmlDoc.querySelectorAll(".card");

querySelectorAll is not live query. You should try getElementsByClassName if you have any kind of ajax or dynamic dom changes on page

Link to comment
Share on other sites

10 minutes ago, wpsoul said:

I can't tell exactly, but 

 

let newItems = htmlDoc.querySelectorAll(".card");

querySelectorAll is not live query. You should try getElementsByClassName if you have any kind of ajax or dynamic dom changes on page

Tried but it's the same :( 

Link to comment
Share on other sites

You would append it. Using insertAdjacentHTML is just going to duplicate it.

Link to comment
Share on other sites

@OSUblake You're the one, that's it! 🤙 Well, that was tricky.

Below the whole code so that could be helpful for someone.

 

axios.post(ajaxurl, form_data)
  .then(function (response) {

  // This keeps the *same* html to inject and animate
  let template = document.createElement("template");
  template.innerHTML = response.data.html;
  let cards = template.content.querySelectorAll(".card"); // Get elements to animate

  // Inject HTML in the DOM
  // Note: DON'T use insertAdjacentHTML to inject, it duplicates html
  containerEl.append(template.content);

  // ScrollTrigger animation
  ScrollTrigger.batch(cards, {
    onEnter: elements => {
      gsap.from(elements, {
        autoAlpha: 0,
        y: 60,
        stagger: 0.15
      });
    },
    once: true,
  });

})

 

  • Like 1
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.
×