Umberto

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>

Hi, I probably couldn't explain myself for my bad English. For the structure of the HTML / CSS I had already solved before sending my first post, but the problem is another. I created 2 pens with the same HTML / CSS structure. The first without ScrollTrigger and it works very well. The second pen, I use native Scrolltrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy ()), and there are scroll problems here. https://codepen.io/umberto/pen/MWppVOO https://codepen.io/umberto/pen/mdWWxXy As you can see (in the second pen), the page layout does not scroll modal. Therefore, I believe, it is a problem in handling the height of the Scrolltrigger viewport and not the CSS or HTML DOM, so I think. Ps: I saw that with codepen (second example) does not highlight the problem, I send a link to understand better: https://webgraphicart.com/artik/codepen-modal-2.html

Thank you for your reply, very kind. As for the syntax I'll fix it later. I have tried your example before, and it is correct. But what I wanted is that the modal covered the whole layout (100%) and if it was possible to stop scrolling when the modal or image was in fullscreen. Instead if I use the smooth scroll of Scrolltrigger no work gsap.registerPlugin(ScrollTrigger, CustomEase); console.clear(); // var container = document.querySelector("#content"); 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: 2, invalidateOnRefresh: true, onRefresh: self => { // 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. gsap.killTweensOf(self.animation); self.animation.progress(self.progress); } }, }); https://codepen.io/umberto/pen/PopppXR Is there a solution? Thanks

Hi, I wanted to create a lightbox Gallery, but I have a problem with Scrolltrigger. When I try to open an image (with position Fixed in CSS file), it doesn't cover the whole Layout, in fact if you try to scroll it doesn't stay fixed. Can you help me? Thanks

Problem solved, I completely rewrote the code creating many variations

I understand

Hi, by FREE do you mean those who have an active paid subscription (BusinessGreen)? If so, my subscription will be activated as soon as I complete the project (in a few months). In any case, I will wait for the intervention of other users. Thanks