Umberto

Now everything is easier. Thanks for your suggestions

This is what I wanted, PERFECT! 👌 I have a couple of questions to understand better: - For more efficiency, in the ".quote" class should I add "display: inline-block"? - The "split-line-inner" class should I add something in my css file or does it remain empty? Thanks for your time

I apologize but maybe I am a little confused. I try to be more precise. The following pen I animated the words, now I would like to animate only the line, without animating the words and chars. I'm trying but I can't. https://codepen.io/umberto/pen/ExwLPrp I hope I was clear. Thanks for your patience

The problem is that I can't animate the Lines because there is this problem: I would like such a thing https://codepen.io/marctaule/pen/eYWLawR Thanks

I'm looking for a solution, but I can't

Of course, I also wanted to create variations with words and chars. The only thing, you can see in the first pen, the line does not create the same effect as with the chars and words. when the lamination starts, there is no overflow between the lines. Why this? Thank you

I think I solved (I modified the pen above): I changed this line: with I reversed the animation from chars to words and it seems to work. What I wanted to ask and if the code is efficient with the changes made Thanks

Thanks for the reply. With a single line it works, but over multiple lines of text, overflow: hidden for each line doesn't work. I have created a new example. Sorry for my English https://codepen.io/umberto/pen/ExwLPrp

Hi, I wanted to create some variations with the SplintText animation. In the example below, I tried to animate only the lines and not the characters or words, but I couldn't. Thanks

I probably can't explain, but it's my fault. However to fix this I will add scrub: true to all my animations. I thank you for the time you have dedicated to me. Great

I apologize, but I did not read your answer correctly. In my project there are many techniques with the .forEach (), so if I am not mistaken, the advice is to use the latest version of native Scrolltrigger. Correct?

I apologize for my bad English. In the second question I simply asked if using this (the old version of Scrolltrigger Native, used in the 1st example): console.clear (); var container = document.querySelector ("# scroll-container"); var height; function setHeight () { height = container.clientHeight; document.body.style.height = height + "px"; } ScrollTrigger.addEventListener ("refreshInit", setHeight); gsap.to (container, { y: () => - (height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 1.7, invalidateOnRefresh: true, }, }); I will have problems with efficiency, compared to the new version: smoothScroll("#content"); // this is the helper function that sets it all up. Pass in the content <div> and then the wrapping viewport <div> (can be the elements or selector text). It also sets the default "scroller" to the content so you don't have to do that on all your ScrollTriggers. function smoothScroll(content, viewport, smoothness) { content = gsap.utils.toArray(content)[0]; smoothness = smoothness || 2; gsap.set(viewport || content.parentNode, {overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0}); gsap.set(content, {overflow: "visible", width: "100%"}); let getProp = gsap.getProperty(content), setProp = gsap.quickSetter(content, "y", "px"), setScroll = ScrollTrigger.getScrollFunc(window), removeScroll = () => content.style.overflow = "visible", killScrub = trigger => { let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0]; // getTween() was added in 3.6.2 scrub && scrub.kill(); trigger.animation.progress(trigger.progress); }, height, isProxyScrolling; function onResize() { height = content.clientHeight; content.style.overflow = "visible" document.body.style.height = height + "px"; } onResize(); ScrollTrigger.addEventListener("refreshInit", onResize); ScrollTrigger.addEventListener("refresh", () => { removeScroll(); requestAnimationFrame(removeScroll); }) ScrollTrigger.defaults({scroller: content}); ScrollTrigger.prototype.update = p => p; // works around an issue in ScrollTrigger 3.6.1 and earlier (fixed in 3.6.2, so this line could be deleted if you're using 3.6.2 or later) ScrollTrigger.scrollerProxy(content, { scrollTop(value) { if (arguments.length) { isProxyScrolling = true; // otherwise, if snapping was applied (or anything that attempted to SET the scroll proxy's scroll position), we'd set the scroll here which would then (on the next tick) update the content tween/ScrollTrigger which would try to smoothly animate to that new value, thus the scrub tween would impede the progress. So we use this flag to respond accordingly in the ScrollTrigger's onUpdate and effectively force the scrub to its end immediately. setProp(-value); setScroll(value); return; } return -getProp("y"); }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; } }); return ScrollTrigger.create({ animation: gsap.fromTo(content, {y:0}, { y: () => document.documentElement.clientHeight - height, ease: "none", onUpdate: ScrollTrigger.update }), scroller: window, invalidateOnRefresh: true, start: 0, end: () => height - document.documentElement.clientHeight, scrub: smoothness, onUpdate: self => { if (isProxyScrolling) { killScrub(self); isProxyScrolling = false; } }, onRefresh: killScrub // when the screen resizes, we just want the animation to immediately go to the appropriate spot rather than animating there, so basically kill the scrub. }); } Thanks

Thanks

I thank you for the answer. I had already tried to set all the animations to scrub: true and everything works, but I wanted to increase the scrub to have a different effect. I ask you 2 questions: 1 Is it possible to eliminate this problem in the future as in the old version of native Scrolltrigger? 2 If I were to use the old version, will I have problems such as efficiency?

New Version https://codepen.io/umberto/details/vYZXPpY