wpsoul Posted August 21, 2020 Author Share Posted August 21, 2020 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 More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Long ago Jack provided a function to do that Link to comment Share on other sites More sharing options...
Black Ducas Posted October 13, 2021 Share Posted October 13, 2021 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 More sharing options...
GreenSock Posted October 13, 2021 Share Posted October 13, 2021 @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 More sharing options...
OSUblake Posted October 13, 2021 Share Posted October 13, 2021 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. 1 Link to comment Share on other sites More sharing options...
Black Ducas Posted October 13, 2021 Share Posted October 13, 2021 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 More sharing options...
wpsoul Posted October 13, 2021 Author Share Posted October 13, 2021 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 More sharing options...
Black Ducas Posted October 13, 2021 Share Posted October 13, 2021 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 More sharing options...
OSUblake Posted October 13, 2021 Share Posted October 13, 2021 You would append it. Using insertAdjacentHTML is just going to duplicate it. Link to comment Share on other sites More sharing options...
OSUblake Posted October 13, 2021 Share Posted October 13, 2021 Kind of like this... See the Pen qBXdJvx by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Black Ducas Posted October 14, 2021 Share Posted October 14, 2021 @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, }); }) 1 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