Nick.Ls

Good day Jack @GreenSock, The codepen is a mess of testing and retesting but you are right! That's what I need... Scrollsmoother was set in my live demo, not the codepen. Either way this looks like a solution! Let me try and I'll let you know... Thanks!

Hello forum! I can't see any configuration at this point that can work for my setup... Can't find any set of options that won't break the scrolltriggers once the scrollsmoother is enabled? Any suggestions? Why do scrolltriggers lose their trigger position with scrollsmoother enabled?

Codepen updated with solution (as it seems so far). It looks like the additional scrolltriggers that I want to autoplay can be triggered (with lots of manual calculation of percentages), using the pinnedContainer: true option with PreventOveralps and fastscrollEnd to prevent overlapping of animations (in a most complicated scenario of course). The issue I am facing now is that enabling scrollsmoother the scrolltriggers don't fire. Any ideas why?

Yeah kind it is @mvaneijgen Either creating scrolltriggers withing the pinned scrolltrigger or timelines that will trigger based of the progress onUpdate() of the pinned scrolltrigger, there has to be a manual calculation of the timings and the entry / exit points. PreventOveralps and fastscrollEnd is also a must eitherwise animation will still stuck up on each other and break. I am still trying to figure it out... if I find a solution I'll let you know...

Looks like observer is great for repeatable sections but in my case basically what I am trying to achieve is to create scrolltriggers of different timelines inside the pinned scrolltrigger. The scenario is I have a pinned section where a scrub timeline animates through scrolling whilst a bunch of other timelines need to be animated at specific positions of the pinned section's progress. I hope I gave you a better view of my total sequence and what I try to achieve. Any other suggestions are welcome!

Interesting approach @mvaneijgen !!! I haven't worked with observer before but it looks like a solution already. Let me take a look at it and try it out and I'll get back to you. Thanks!

Codepen added! As you may see, fast scrolling forwards or backwards breaks the animation...

Greetings magnificent forum! Firstly, let me explain my setup. I have a container that is pinning for a large amount of time. During the pinning of that section I have a secondary (paused) timeline where I have created the total sequence I would like to be animated in parts, breaking each part with an .addPause(). The pinned timeline's onUpdate function is calling out the play(), reverse() functions in the secondary timeline based on its progress. What I trying to achieve is to create a timeline that will play / pause / resume and reverse based on my scrolling direction without overlapping or breaking the animation. My code as follows: let sec1Step_2_skipper = false; let sec1Step_3_skipper = false; let sec1Step_4_skipper = false; let sec1Step_5_skipper = false; let sec1Step_6_skipper = false; // STEP #1 let sec1Step_1 = gsap.timeline({ scrollTrigger: { trigger: "#section1", start: "top top+=1%", }, ease: "none", }); sec1Step_1 .from(sec1BG, { duration: 1, scale: 1.1 }) .to(overlay_1, { duration: 1, yPercent: -100 }, 0.25) .to(splitter_1, { duration: 1.5, "--translate-positive": "0%", "--translate-negative": "0%" }, 0) .to(splitterText_1, { duration: 1.5, clipPath: "inset(0% 0%)" }, 1.4) .to(splitter_1, { duration: 1, "--left-positive": "110%", "--left-negative": "-10%"}, 1.5) .from(iraklisLogo, { duration: 1, opacity: 0, yPercent: 110 }, 2.5) .to(".mouse", { duration: 1, opacity: 1 }); // STEP #2 let sec1Step_2 = gsap.timeline({ paused: true, ease: "none", }); sec1Step_2 .addLabel("label2") .to(iraklisLogo, { duration: 0.5, opacity: 0, yPercent: 110 }) .to(".mouse", { duration: 0.5, autoAlpha: 0 }, "<") .to(splitterText_1, { duration: 0.5, clipPath: "inset(0 100%)" }) .to(splitter_1, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }, "<") .to(splitter_1, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"}) .to(splitterText_2, { duration: 1.45, clipPath: "inset(0% 0%)" }, "<") .addPause() .addLabel("label3") .to(splitterText_2, { duration: 0.5, clipPath: "inset(0 100%)" }) .to(splitter_1, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }, "<") .to(splitter_1, { duration: 0.5, opacity: 0 }) .set("#section1 .spacer", { display: "block" }) .addPause() .addLabel("label4") .to(splitter_2, { duration: 0.5, autoAlpha: 1 }) .to(splitter_2, { duration: 1.5, "--translate-positive": "0%", "--translate-negative": "0%" }, "<") .to(splitter_2, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"}) .to(splitterText_3, { duration: 1.5, clipPath: "inset(0% 0%)" }, "<") .addPause() .addLabel("label5") .to(splitter_2, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }) .to(splitterText_3, { duration: 0.45, clipPath: "inset(0 100%)" }, "<") .to(splitter_2, { duration: 1.5, "--left-positive": "110%", "--left-negative": "-10%"}) .to(splitterText_4, { duration: 1.45, clipPath: "inset(0% 0%)" }, "<") .addPause() .addLabel("label6") .to(splitter_2, { duration: 0.5, "--left-positive": "50%", "--left-negative": "50%" }) .to(splitterText_4, { duration: 0.45, clipPath: "inset(0 100%)" }, "<") .to(splitter_2, { duration: 0.5, "--splitter-opacity": 0, "--splitter-visibility": "hidden" }); // PINNING TL let steps = [ { start: 0.15, end: 0.30, label: "label2", skipper: sec1Step_2_skipper }, { start: 0.30, end: 0.35, label: "label3", skipper: sec1Step_3_skipper }, { start: 0.35, end: 0.50, label: "label4", skipper: sec1Step_4_skipper }, { start: 0.50, end: 0.80, label: "label5", skipper: sec1Step_5_skipper }, { start: 0.80, end: 0.87, label: "label6", skipper: sec1Step_6_skipper }, ]; let sec1Pin = gsap.timeline({ scrollTrigger: { trigger: "#section1", start: "top+=5% top+=1%", end: "+=500%", pin: true, anticipatePin: 1, scrub: 2, fastScrollEnd: true, onUpdate: (self) => { const progress = self.progress.toFixed(2); let direction = self.direction; for (let step of steps) { if (progress >= step.start && progress <= step.end) { if (direction === 1 && !step.skipper && !sec1Step_2.isActive()) { sec1Step_2.pause(); sec1Step_2.play(step.label); step.skipper = true; } else if (direction === -1 && step.skipper && sec1Step_2.isActive()) { sec1Step_2.pause(); sec1Step_2.seek(step.label); sec1Step_2.reverse(); step.skipper = false; } } } }, }, ease: "none", }); sec1Pin // STEP #1 .fromTo(sec1BG, { rotate: 90, scale: 2 }, { rotate: 0, scale: 2.4 }) // STEP #2 .to(sec1BG, { scale: 1 }, "+=25%") // STEP #3 .to(sec1BG, { clipPath: "circle(12% at 50% 50%)" }, "60%") .to(".shape.shape-g", { x: "0%", scale: 3.5}, "60%") .to(".shape.shape-p", { x: "0%", scale: 3.5}, "60%") // STEP #4 .to(sec1BG, { clipPath: "circle(0% at 50% 50%)" }, "78%") .to(".shape.shape-g", { x: "-50%", scale: 1}, "78%") .to(".shape.shape-p", { x: "-50%", scale: 1}, "78%") // STEP #5 .to(".shape.shape-g", { x: "-40%", y: "-60%" }, "90%") .to(".shape.shape-p", { x: "-65%", y: "-39%" }, "90%") .to("#section1 .logoText", { opacity: 1, x: "0%" }, "90.1%") .to(".shape.shape-g", { x: "-80%", y: "-60%" }, "90.1%") .to(".shape.shape-p", { x: "-105%", y: "-39%" }, "90.1%") // STEP #6 .to("#section1 .logoText #logo_S", { fill: gsap.getProperty("html", "--color-green") }, "91%") .to("#section1 .logoText #logo_P", { fill: gsap.getProperty("html", "--color-green") }, "91%") .to("#section1 .logoText #logo_T", { fill: gsap.getProperty("html", "--color-green") }, "91%") // STEP #7 .to("#section1 .text-gradient", { clipPath: "inset(0% 0% 0% 0%)" }, "91%") At this point is working mostly as intended with the difference that if I fast scroll forwards the timeline will pause or break at some point without completing. Also, I've tried to create multiple timelines and call each one of them based on pin progress but the same problem occurs more or less... Any suggestions on how to manipulate a long timeline like this? Thank you!

Thanks for the quick reply Jack! It's not more of a to-do request to be honest as more as a theoretical question to try accommodate an extra feature inside my already tweaked slider for future use instead of just creating the scenario I am looking for atm. I believe this will be the next weekend side task for me. Thanks again!

Hi everyone! Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features without having the elements to repeat on the end? Is it a bad approach to try doing this in this setup rather than just create a draggable container or so? ?

Hi @Rodrigo, Thanks for sharing, I will give it a try!

Hi everyone! I have been troubling myself to create a background svg animation. The concept is a topographic map in a svg, that will have the effect of water movement (displacement). I have created several different setups in order to achieve this but in most cases I end up with distorted / breaking lines as in the codepen which is bad because I need the lines to be kept smooth. The most efficient way to do this so far without any breaks is to morphSVG the paths from A to B to C and so on to create the final effect BUT since the paths are way to many and the alterations of it bring even more paths it is a great setup for me. Very time consuming setup. In the codepen example I tried creating a Turbulence which brings almost the same result as morphing all the paths but the main problem of the line weird render / break occurs. Last I've tried pixiJs and something similar to https://pixijs.com/examples/filters-basic/displacement-map-flag where I got a better render on the lines, not perfect, not ideal, just better. I am open to suggestions or similar implementations if anyone has a better view on this. Thank you all for your time!

Well @aerra, this seems like a solution to your request. I will try and give it a better look later on and come back with any findings if so. Nice!

Greetings aerra, The helper function used for this example, as I see it, is built to maintain and calculate the widths of the container and the respective items beneath. You surely can achieve a similar example to vertical slider / carousel with gsap but I would go with a fresh approach. There are a lot of examples based on gsap3 if you search for it in order to find a starting point. Last but not least, post your codepen example here if you make any progress and lot's of people will guide you through to your questions. I believe the experts will correct me if I am wrong about the helper function. Wish you a good day!

Giving a solution on the problem if someone ever comes up with something similar. On ideal scenarios page load speed, DOM elements, js files etc run optimal or are precached so the scroll will occur as intended. On the other hand it looks like in a real scenario the images I have placed create the scrolling height and all the elements must be already loaded to calculate everything correctly. Therefore I used imagesloaded.js where I run the scrolltriggers AFTER the images on the section are loaded and everything works like a charm. Hopefully it can be a solution to someone else too out there. Once again, thanks @Rodrigo for the time spent looking into it and this amazing community / forum!

Hi @Rodrigo, Thanks for your reply. You are right in most of it. Giving it some space indeed works better. The margin on body top is just some space which I don't actually use in my live project. I have tried the above setup with infinite variations ( ? ) at this point to make it work in the most optimal way but in every situation I keep coming across with the same problem. The scrolltrigger height is not calculated properly in every refresh of the page. Same applies to your codepen too... Check the image I am attaching below. The 3rd card does not pin exactly at the same position as the others and the Scrolltrigger end event fires a bit sooner giving us with the above result. Refreshing the page you'll notice that it fixes the problem but refreshing the page is not a solution. I was thinking of a doc ready function before initialization in order to have the content loaded before letting the scrolltrigger calculate the height might work... Any other ideas?

Another finding is that the ending height is not calculated correctly when I hard clear cache on browser which breaks things instead of a simple refresh where I get the right height to scroll...

Hey everyone, I was creating a similar section in my project like the one I am attaching below: https://codepen.io/GreenSock/pen/JjLjBVQ and it worked just fine until I imported ScrollSmoother. Adding smoother seems that it breaks the end points (?). Attaching codepen with smoother added as reference too. https://codepen.io/Nick_Ls/pen/RwJzgPg P.S. In my website setting the pinSpacing to true seems to make things a bit better but still out of sync. Any ideas? Thank you in advance!

Hi Jack, I have used your solution already, thanks for that! And thanks for the info provided.

Hi Jack! I am sending you over a codepen, same setup but smoother 3.11.0 instead of the 10.4 you are using... check the console for the error. Same thing will not occur if you replace the smoother version 10.4 on my codepen. Let me know if I can be more of assistance! https://codepen.io/Nick_Ls/pen/xxWvLKW

Hello everyone, I have downloaded the latest version of ScrollSmoother along with GSAP 3.11. In my effort to get velocity on smoother update as used in documentation and as I have used before, it now comes with a console error of function not found. I used a previous version of ScrollSmoother and it works fine. If you feel to look into it be my guest Ty all!

Hey Jack, That is truly a rework! Yes, it helps a lot! My code did the work but this is educational the least. I am going to break down the code to see what you actually did. Very helpful! Thanks again!

Oh thanks @Cassie, I hadn't noticed that bug... Guess the "lottery spinner" didn't land on 1 or 2 to see the error. You're right! Nice!

Here you go, It's a copy from the draggable carousel on Helper Function with some additions to calculate the middle item. I have commented on the code so you can with ease the additions. And of course I am available if someone needs some further clarification. (the red box that appears is your center element) https://codepen.io/Nick_Ls/pen/mdXxLXJ

Hi Jack, I have used the drag carousel from the helper functions where with tl.current() I retrieve the index increment it to match the center index always and then I pass as a class as I intended to do from the beginning. And it works! I can give you a demo for future reference if you need. Thank you for your interest though! Helper function gave me what I needed it to move on.