Black Ducas

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 wor

@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

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, { scrollTrigge

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 th

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? - h

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

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 th