Umberto

I meant this: https://codepen.io/umberto/pen/GRQEmYq Thanks

This is perfect, it was what I was looking for. ScrollSmoother is really beautiful, it has only one thing that is "missing", the horizontal scrolling of the elements. I hope this option will be included in the next upgrades. Thank you very much

Hi, I upgraded my project from Locomotiscroll to ScrollSmother, and I have to say that I am much better off. However, I have a problem with my page height with ScrollSmother. In the animation that you find below (link hover), with Locomotivescroll, adding "html, body {height: 100%;}" the hover works perfectly and the images are the correct size, while with ScrollSmother the images are not resized, also, the longer the page, the larger they become. 1 - Example ScrollSmother 2 - Example Locomotivescroll https://codepen.io/umberto/pen/NWyjJbB https://codepen.io/umberto/pen/QWQvoZP Is it possible to solve this problem? Thanks

Will try to add fewer animations. Thanks for your help and for your availability.

I have already tried to use ScrollSmoother and it is much more efficient and smoother than Locomotivescroll, but testing it I have a problem with the body on an animation (https://tympanus.net/codrops/2019/10/21/how-to- create-motion-hover-effects-with-image-distortions-using-three-js /), but for that I open another post. I tried adding will-change: transform .js-reveal-text-words-up, .js-reveal-text-chars-up, .js-reveal-text-heading-chars-up, .js-reveal-text-chars-left, .js-reveal-text-rotate, .js-text-chars-l { will-change: transform } but it does not work. thanks

Thanks for the reply. I sent a new codpen because the previous one was not activated Locomotivescroll. Try now https://codepen.io/umberto/pen/xxYdwvL So can the flicker be due to my iMac? If I insert too many text animations on a page, can it cause this problem? Thanks

Hi, I have created some splittext animations to insert on my page. I noticed that on the various browsers, when I scroll down the text begins to flicker, especially if I use the type: "lines, words" and type: "lines, words, chars" class. Probably, I made some mistakes in compiling the code. Below I bring you my example Thanks for your help

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

Hi, I use native Scrolltrigger, but I have a problem with scrub. With the old version (example 1) the scrub works fine. In the new version (example 2), when I scroll it works fine, but when I go back up and scroll down, you can see that the animation waits a few seconds before restarting. Can you help me? Thanks Old Version https://codepen.io/umberto/pen/vYZXbbv

What you say is the truth, with smooth scrolling I am having many difficulties, fortunately many of the problems I have managed to solve. I have tried various libraries (Locomotivescroll, Smooth-Scrollbar, etc ...), but the best is that of Scrolltrigger, ever .... I have to find a new solution to try to create an Image Gallery with a position fixed fullscreen. In the meantime, thank you for the advice and for your time. You gave me a nice explanation. Thanks

Hi akapowl, thank you for your reply. I have already updated the new version of native Scrolltrigger. I had already tried to insert modals before #content and they work very well, but some animations and image galleries can't insert them before. As you said, even updating the new version of native Scrolltrigger, the problem is not solved with the fixed position. Thanks for your patience PS: thanks for the </div>