Black Ducas

Hi, just a variation on this question. Say I've this code and I need to animate the title "Title" <section> <header> <div class="container"> <h1>Title</h1> </div> </header> <div class="container"> Content... </div> </section> Is it more efficient apply the animation on <header> tag or <h1> tag? Consider that the element could be much more nested than that.

@Stefano Monteiro Yes, that was clear. I'd like to know if there's a way to avoid to specify each classes.

Hi @OSUblake I've a code like this: gsap.utils.toArray("" + ".js-class-1, .js-class-1-wrap > *," + ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors .forEach(el => { gsap.from(el, { scrollTrigger: { trigger: el, once: true, }, y: animUpY, autoAlpha: 0, }); }); and I obviously get in console a lot of "not found" warnings because some classes are on a page, some others on other pages, and so on. What is the best practice in gsap to check them with an if? This technique could decrease performance? (and for this reason is better shutdown warnings in gsap.config?) Also, any advice about a better refactoring of my code is welcome Thanks

@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, }); })

Tried but it's the same

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, }); })

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

@GreenSock Thanks! How can I make it to animates the elements just once? With the following code: scrolling down it animates the cards as expected, then I scroll back to top page and scroll down again and it animates the elements again. I'd like to not animate them again. ScrollTrigger.batch(".cards", { onEnter: elements => { gsap.from(elements, { autoAlpha: 0, y: 60, stagger: 0.15 }); }, });

@OSUblake Hi, no I need a callback that is called after ScrollTrigger.create() is initialized. This is not related to user scrolling or scroll positions. What I'm doing now is using a seTimeout but it's awful and risky setTimeout(function() { // Doing things *after* ScrollTrigger.create() is initialized, considering that it finished in 1 second. This is obviously dirty and not precise }, 1000);

Hi, I'm creating a ScrollTrigger for each cards on my page. I need to do things after the ScrollTrigger has ended to initialize. I can't find a callback (like onComplete) to do this. Any help? cards.forEach(card => { ScrollTrigger.create({ scrollTrigger: { trigger: card.querySelector(".title"), // onEnter: (self) => { ... } // I need something like this: onComplete: function() { console.log("ScrollTrigger initialized"); // Doing things } }, }) })

Hi @Cassie yes it helped. I just asking me: what's the pro of using the whole section as trigger, because now it animates also the elements outside of the viewport. Is it possible to use the single elements as trigger or it makes no sense? It should be better for performance and smooth animation. Let me know your opinion, thanks And, in your opinion, your code is already optimized and performant like LocomotiveScroll parallax or are needed more optimizations?

Hi @Cassie thanks for answer. Yes you're right on this point "I don't quite understand how you're aiming to not animate out of that section though?" The codepen works nice but I'm thinking what's the pro of using the whole section as trigger 🤔, because now it animates also the elements outside of the viewport. Is it possible to use the single elements as trigger? It should be better for performance and smooth animation. Let me know your opinion In general, I'm struggling to understand the logic behind this line: y: (i, el) => (-1 * parseFloat(el.getAttribute("data-speed"))) * postsSection.offsetHeight, Thanks

Hi, I'm really stuck on this simple thing. I just want gsap to change the scrolling speed of elements basing on data-speed attribute. That is, data-speed=1 it has to do nothing, it's normal speed. If 0.5 it's half, if -0.5 it's half but in inverted direction. I started from the demo in the docs, and adapted to my layout, but with this layout it doesn't work anymore. https://codepen.io/gooogooo/pen/yLXbpaM I don't get where I'm wrong. I'm trying also with this other way: gsap.to("[data-speed]", { y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window), // y: (i, target) => target.dataset.speed * 500, // y: (i, target) => -ScrollTrigger.maxScroll(window) * target.dataset.speed, ease: "none", scrollTrigger: { trigger: "#featured-posts", scrub: true, markers:true, } }); but again don't work as expected. Hope someone could help me. Thanks

Hi I'm doing a super simple scroll-to anchor thing: let buttons = document.querySelectorAll('.btn'); if (buttons) { buttons.forEach(btn => { btn.addEventListener('click', function (e) { e.preventDefault(); // Scroll to gsap.to(window, { scrollTo: { y: "#anchor-el", offsetY: document.querySelector('.js-header').offsetHeight * 2, autoKill: false, }, duration: 1, ease: "power2.inOut", }); }); }) } It works well but on Safari and iOS there's this strange behaviour: the first time I click a button the scroll-to makes a strange jump and after that starts to smooth scroll. From the second time I click a button all works right without jumps. I tried autokill but doesn't solve. Any idea? EDIT: sorry, it was my fault, if it could be useful for someone: the "jump" was caused because before starting the scroll-to animation there was a script that changed the DOM, adding some HTML. I resolved changing the DOM after scroll-to animation is ended (using its onComplete callback)

@ZachSaucier Hi the page is composed by 5-6 texts of maximum 35 words. They're short texts, that's why I thought to animate the single words. So you say the main problem here is the many words to process and not my code? Replaced all y with yPercent and added once:true. Hard to say if it improved There's something else I could try? Could improve performance put each words animation (gsap.from(childSplit.words...) in a timeline and then run each timeline only when text is in view? Don't know if it make sense, maybe it's just the same that happens now with ScrollTrigger