Black Ducas

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

Hi I'm animating texts on a webpage with this simple code that starts at page run: let texts = document.querySelectorAll("" + ".section__h, .section__t," + "body.s .e-content li, body.s .e-content p, " + "body.s .e-content h5, " + "body.s main section:nth-child(2) h1, body.s main section:nth-child(2) p"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigger: text, y: "100%", duration: 0.75, stagger: 0.05, }); }); That is: I get all the text elements I want to be animated, then I loop them (forEach) to split them in words and animate the words. All works well but while I scroll the page the animation are laggy, slow down, as if the browser was having a hard time processing them, like if the workload builds up more and more as I scroll down the page. To improve it I put will-change: transform; on the animated elements (.text-child), it seems a little better but not that good. Any advices? Is there something I'm making wrong? Thanks

Hi @ZachSaucier added limitCallbacks ScrollTrigger.config({ limitCallbacks: true }); let texts = document.querySelectorAll(".section__head, .section__text"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigger: text, y: "100%", duration: 0.75, stagger: 0.05, }); }); but it's as before. Scrolling up the animations are already complete.

Hi @mikel super-interesting but it seems can't help me, for example I tried toggleActions: "play reset play reset" but it triggers animations everytime it enters or enter back. Also adding once: true, doesn't help because that "once" is automatically played at refresh ?

Hi I've some simple animations on some texts that are triggered when the elements appear in the viewport. let texts = document.querySelectorAll(".section__head, .section__text"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigger: text, y: "100%", duration: 0.75, stagger: 0.05, }); }); It works very well, but if I refresh the page in the middle of the page I noticed that the animations previous in the page are automatically triggered. The next animations instead are triggered normally when scrolling down they appear. Scrolling up I see the previous animations already finished. I need to avoid this. Any ideas? Thanks

Hi I'm trying your method to split text twice in gsap 3 let split_1 = new SplitText(".js-text", { type: "lines", linesClass: "lineChild" }); let split_2 = new SplitText(".js-text", { type: "lines", linesClass: "lineParent" }); but I get error Uncaught TypeError: Cannot read property 'nodeType' of null Error is caused by the second split, because removing that I get no error. Any idea?

@ZachSaucier oops, I just put the .preventDefault() and this doesn't happen anymore. Right?

Thanks @ZachSaucier for clarify. Just one thing: I noticed that clicking the link when page isn't at top it doesn't scroll starting from that point but it abruptly jump to the top (without animation) and then animate the scroll down. Is it normal? Here my code: if (this.shopCtaBtns) { this.shopCtaBtns.forEach(element => { element.addEventListener('click', (e) => { gsap.to(window, { duration: 1, scrollTo: "#section-overview", ease: "power4.inOut" }); }) }) }

Hi I'm trying the scrollTo plugin, awesome, just a detail, when it triggered it adds an hash (#) at the end of the URL, like www.mysite.com/page# How can avoid this? Second and last one, I'm trying to use it with class instead of id and it seems to work, is this correct or is recommended to use id? gsap.to(window, { duration: 1, scrollTo: ".section--overview", ease: "power4.inOut" }); Thanks

Hi @ZachSaucier yes I'm trying to understand it, could you give some little help on the overall approach and key points? Basically the initCell function seems the core. Thanks

Hi @ZachSaucier , yes I usually use GSAP 3, I'm just using the version of the original example, next I'll port it to v3. Thanks for answers, point 1 solved. Other 3 ones are not immediate to me. In your opinion is there a better/simpler approach to do the same thing?

Hi @ZachSaucier right! It was missing the trigger, my mistake, but my first problem was how to control a transition by dragging. I found this example by @OSUblake that fits better my case. https://codepen.io/osublake/pen/YrXdGZ Basing on that I was able to do this: https://codepen.io/gooogooo/pen/JjYbjaM Not bad, but I'm stuck on some details: - most important, how can I know when a single transition ends? I need like a callback to start another animation - I can't disable the infinite loop, is there an option? - how can I recognize the cards going on the left of the central one? Because while dragging to left I want they animate to opacity:0 - how can I set the first card element (Card 1) as the default central card? While now it's Card 4, without any apparent logic Maybe @OSUblake knows better how to solve these issues, since my code is basing on his example. Thanks

Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the transition controlled by the dragging. Any helpful ideas? Thanks https://codepen.io/gooogooo/pen/oNjzpor

Hi @GreenSock, I find that demo very unusable, because you need to have a trackpad (or similar) to scroll horizontal and you need to know you can scroll horizontal in that way. All things a normal/middle user easily doesn't know. I meant an effect like this (in the example made by ScrollMagic): https://codepen.io/gooogooo/pen/qBdewXg So, as you can see, it's controlling an horizontal animation by vertical scrolling. This effect is seen on many important hyped websites and it's requested more and more by clients. Will this be possibile with the new plugin? Thanks for hearing at our opinions

@OSUblake @GreenSock We love too the horizontal scroll in certain case, like for history timeline. That example from Scrollmagic is always been disappointing and has bad UX. Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down like we tried to do here: If the new plugin will already implement this, it would be super super awesome.

Hi @OSUblake Class field gives me compiling error Support for the experimental syntax 'classProperties' isn't currently enabled but I will deepen next on this, since it's related to my webpack workflow, I think.