fonveton

Zoom: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom I created a simplified version of my project to explain the issue. It's not the exactly the same code. I don't get why animating element and trigger can't be same, If I'm not changing the element' position. I'm using it this way all the time without any problem.

I'm using zoom style for some reasons and while using it I'm getting wrong start/end locations from scrollTrigger. I tried calculating everythings to solve this issue and for last hope I'm writing here. Is there a way to use scrollTrigger and zoom right way?

I use scrolltrigger on almost all of my projects and most of the scrolltriggers unrelated to each other and some of them have pin and other have different animations. I'm creating multiple scrolltriggers inside to, from and timeline functions. What is the best way of use multiple unrelated scrolltriggers to achieve high performance and minimal issues? Is there a better solution other than creating multiple scrolltriggers?

added codepen to main topic: https://codepen.io/manidar/pen/xxaWYeG

I didn't create a codepen because my issue is performance related using same effect multiple times. In my latest project I used this effect on 210 objects and even chrome lags a lot. It adds extra 2-3 seconds to website load time. I would like to know if there is a gsap approach to solve this issue.

gsap.utils.toArray(".text-hover-effect").forEach(element => { let text = element.textContent; element.innerHTML = '<span class="actual -translate-y-[50%] [&_.split-chars]:overflow-hidden absolute left-0 top-[50%] w-[100%]">' + text + '</span><span class="placeholder [&_.split-chars]:overflow-hidden">' + text + '</span>'; let placeholder = new SplitText(element.querySelector(".placeholder"), { type: "chars, words, lines", charsClass: 'split-chars', wordsClass: 'split-words', linesClass: 'split-lines' }); let actual = new SplitText(element.querySelector(".actual"), { type: "chars, words, lines", charsClass: 'split-chars', wordsClass: 'split-words', linesClass: 'split-lines' }); let textHoverTL = gsap.timeline({ paused: true }); gsap.set(actual.chars, { y: '50%', opacity: 0, }); textHoverTL.to(placeholder.chars, { duration: 0.25, y: '-50%', opacity: 0, stagger: 0.001 }) .to(actual.chars, { delay: 0.025, duration: 0.25, y: '0%', opacity: 1, stagger: 0.001 }, 0); element.addEventListener("mouseenter", () => { textHoverTL.play() }, false); element.addEventListener("mouseleave", () => { textHoverTL.reverse() }, false); }); I wrote a short code for text animation and I'm using this class on multiple object on page. The problem I'm having is if there are too many element it becomes a performance issue. I takes 1-2 seconds to load with over 50+ '.text-hover-effect' classes. I know the problem is I'm doing a lot of things before page load and that is what creates performance issues. What I don't know, how to solve this. I tried making all codes start working on hover but that way with multiple classes it's not working how it supposed to be and breaks you you move your cursor swiftly between objects. const textAnim = { in: { duration: 0.15, y: '-25%', opacity: 0, stagger: 0.001 }, out: { delay: 0.015, duration: 0.15, y: '0%', opacity: 1, stagger: 0.001 } }; gsap.utils.toArray(".fx-text-hover-with-child").forEach(el => { el.setAttribute('data-fx', el.querySelector(".fx-child").textContent); el.addEventListener("mouseenter", () => { let child = el.querySelector(".fx-child"); if (el.getAttribute('data-fx') != 'used') { let text = el.getAttribute('data-fx'); el.setAttribute('data-fx', 'used'); child.innerHTML = '<div class="actual -translate-x-[50%] -translate-y-[50%] absolute left-[50%] top-[50%] w-[100%]">' + text + '</div><div class="placeholder">' + text + '</div>'; new SplitText(el.querySelector(".placeholder"), { type: "chars, words, lines", charsClass: 'split-chars', wordsClass: 'split-words', linesClass: 'split-lines' }); new SplitText(el.querySelector(".actual"), { type: "chars, words, lines", charsClass: 'split-chars', wordsClass: 'split-words', linesClass: 'split-lines' }); } textTL.add(gsap.set(child.querySelectorAll('.actual .split-chars'), { y: '25%', opacity: 0, })); textTL.add(gsap.to(child.querySelectorAll('.placeholder .split-chars'), textAnim.in)) textTL.add(gsap.to(child.querySelectorAll('.actual .split-chars'), textAnim.out, 0)) textTL.play(); }, false); el.addEventListener("mouseleave", () => { textTL.reverse(); }, false); });

Thanks again. This solved my problem.

Thank you. Is there a way to apply this to a specific scrolltrigger which is inside a gsap.timeline?

Is there a way to detect scrolling stopped while using scrolltrigger. I have an element i'm rotating based on scrolling direction with self.direction but I want that element to return original rotation when scrolling stopped. Is there an event or some other way that I'm having a hard time finding?

I have an animation on my page and Im trying to add another one. First animation works with scrolltrigger and changes heigh of some elements, that brokes start/end position for my second animation. When I refresh scrollTrigger before my second animation this time it brokes my first animations start/end position and can't reverse it on scroll. So my question is 'is there a way to refresh scrolltrigger for just one scrolltrigger animation' ?

That doesnt seem to be problem. I added a minimal demo to codepen.

I'm using clip path to draw shapes but some of them leaves black traces behind. I tried changing clip path opacity, fill and stroke values but nothing changaes. What should do to solve this issue? Here is live link: https://demo.pentayazilim.net/daf-kilit/product.php SOLVED: Issue was missing fill on line.

Oh, didn't know that. data-lag works perfecly, It's a shame that data-speed can't be same. I will move on with scrollTrigger then. Thank you.

I'm using ScrollSmoother and data-speed attribute. Using data-speed="2" value changes object transform from its original position, before scrolling. I'm using complicated scss files so can't create a simple demo but you can see the example of problem I'm having here:

Thank you i didn't know about batch. That solved my problem.