DK7

Hi friends, a new day a new problem to solve and i'm stuck and need a tip from you pros ? In my codepen example there are 4 sections that are scrolled horizontally. Section 2 & 3 stay put for their animation. If I now make the browser smaller or larger, the timings of the trigger points change and the aminations start too early. In order to be able to see the whole thing correctly, you have to view the codepen in full screen. e.g. the list animation in section 3 runs fine in full screen, but when the codepen is in the normal small view, they start too early and don't run all the way to the next section. What can I do here so that all triggers always start and end at the right time for every screen size? Thank you for your help and have a nice weekend ✌️

Tested ok and it works ? Of course I didn't have to add my own ScrollTrigger but just use the first main trigger of the panels Thank you for your help! Great! ? Regarding the other topic, can you explain to me why I always have to put a tween in between? Like here with ".list-left"? By the way, this can also be any other element in the panel, the main thing is that there is a tween before the last tween that scrolls the sections all horizontally

Hi @Cassie, thank you very much for your quick help! Oh, I left the list-left container out of the example here so the code wouldn't be too long, but forgot the tween I don't really know myself why I'm doing this ha I had asked about this in my other forum post, where I had asked so many questions. It was about one or more panels stopping when scrolling before scrolling to the next panel. I thought that was called pinning. But pinning is apparently for the scroll trigger. Ultimately, you also pin the panel So that e.g. the second panel remains as in my Codepen example, I always have to put a .to() between them. Otherwise it won't work. I need this code so that the 2nd panel (section) remains. .to(sections, { xPercent: -100 * 2, ease: "none", }) .to(".list-left", { repeat: 1 }) If I want the 3rd panel to remain standing as well, I would have to add this code next: .to(sections, { xPercent: -100 * 3, ease: "none", }) .to(".list-left-p3", { repeat: 1 }) .list-left-p3 is just a wrapper placed in the 3rd panel. Just like .list-left is a wrapper actually placed in the 2nd panel. Only then can I add this code (tween): .to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); So that all sections are scrollable. In my other forum post I already asked why I always need an in-between tween for this to work Without the ".list-left" the panel doesn't stay pinned. The answer is simple: Without SmoothScrolling, the scrolling isn't that nice So far I didn't know that I could get the same effect in another way. I had therefore bought a GSAP license so that I could use the smoothScolling plugin How else do I do that? Do you have an example for me? YES! That looks exactly like what I need, very cool! I have to test this in my local test environment right away That means I simply use my own scroll trigger that uses the entire page length of all sections as the end and can then use the callbacks to trigger the navigation function, right?

Hi, I can't get any further with one thing and I hope you can give me a tip. There are several horizontal scroll areas and I would like the navigation to open at the very end, i.e. on the last scroll point, regardless of whether more scroll panels are added. I know there is onLeave, so I could add another panel at the end and display the navigation with a scroll trigger. However, since the navigation can also be closed with an X, the user would then be on an empty page. Also, I think there has to be an easier way, right? Does GSAP have a call that can be executed on the last scroll point and is also reverse-capable, so that the navigation can be closed again when the user scrolls back? Thank you for your help friends ?

Hi @Cassie, thank you very much for your help! The video was also very helpful I've watched it a few times now so that things stay in my memory

Hi @PointC, that's great! I thought I had to do it all with .to() etc. as well. You are my hero of the evening, thank you very much! Did I really only miss these two containers? How good is that? <div id="smooth-wrapper"> <div id="smooth-content"> Thank you very much !

Hi, as a GSAP beginner, every day is exciting and you always discover new behaviors that are so completely strange for me I've come across something that's driving me crazy. The page scrolls horizontally, everything is great, but if I place elements like a logo and a burger menu in code before the animated container, they do just scroll out of the page? What is happening here and how can I use css position:fixed; for elements like I can normally do? Thanks for your advice

Aaaah ok now I understand the meaning behind it! Thank you for the detailed explanation! And through the "Sections" array, all the sections stored in the array get the .to() right? .to(sections, { xPercent: -100 * 2, ease: "none", }); In the end, you could also write it like this with 5 sections: tl.to(sections, { xPercent: -100 * (5 - 1), ease: "none" }); and this .to() is also given to all sections. So that would actually be xPercent: -100 * 4 right? But why does the timeline still have to animate ".left-side" so that the sections scroll horizontally? I don't quite understand that yet? We have: let sections = gsap.utils.toArray(".slide"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", pin: true, scrub: 0.1, end: "+=2000" } }) .to(sections, { xPercent: -100 * 2, ease: "none", }); tl.to(".list-left", { scale: 0.5, yo-yo: true, repeat: 1 }); tl.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); For the sake of clarity, a short summary: let tl = gsap.timeline .to sections tl .to list-left .to sections ".to list-left" could actually be deleted: let tl = gsap.timeline .to sections tl .to sections but then you could actually do it that way, or doesn't that work? let tl = gsap.timeline .to sections .to sections I think it is important for me as a beginner to understand the order. If I create a timeline and this is already assigned a .to() at the beginning, like this: let tl = gsap.timeline .to.... 1 what happens if I add something to this timeline later? So that's how: let tl = gsap.timeline .to... 1 ....... ....... ....... tl .to... 2 .to... 3 .to... 4 Then .to 1 is executed first and then .to 2 3 4, isn't it? And what I also noticed, some .to() only work if I use "gsap.to" instead of "tl.to". Can you briefly explain the difference to me? That would be great! Is "gsap" a kind of global timeline that encompasses everything? But creating a new timeline with: let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", pin: true, scrub: 0.1, end: "+=2000" } }) is then only from or for the scroll trigger element ".main-container"? Ok I think I'm confusing the meaning of pinned. I thought pinned would be like e.g. in CSS fixed. The element is then positioned in a fixed manner. But fixed elements, for example, don't work at all within horizontal scroll areas, as I've noticed, right? I was able to use CSS: .logo{ position:fixed; left:20px; top:20px; } place a logo at the top left and all sections behind it are scrolled horizontally as normal. BUT I can't do CSS: .burgernav{ position:fixed; right:20px; top 20px; } to place a burger menu at the top right. No matter what I try, the element stays invisible. Why is that and how can I do that? Ok the code is up to "gsap.registerPlugin(GSDevTools);" & "GSDevTools.create();" identical in these examples right? I haven't tried GSDevTools yet ^^ Yes, I really want to do it the way you do - I'm LEARNING diligently every beginning is difficult If I understood your hint correctly, then I actually always have to build a timeline that plays all animations of the entire page one after the other when it should be a horizontal scroll mechanism. Only when everything looks so good automatically, i.e. when I press play or the timeline starts by itself, only then do I add scroll triggers in the code at the end? That's an important tip thank you! Yes, thanks! I've read it all several times and made my own "important list" of things I'm sure I'll need again at some point I would like to do that, but since the images should have background-size: cover via CSS, so that they always fill the entire container responsively (60% .right-side), I have to change the images via CSS. Unfortunately, IMG only supports "workarounds" which are not compatible with all browsers. But thanks for the tip! I apologize for my many questions and thank you for your patience and time! As a beginner to new techniques, I can only learn things from a pro like you. And I'm glad that you are doing such a great job here in the forum and that you are taking the time to help! Thank you very much ?

Hi @OSUblake and @Cassie, i need help please ? In the last 2 days I've been studying the examples and common error pages of GSAP and unfortunately I can't get any further. That's because I still don't understand some basic things about GSAP. Can you explain this to me in a little more detail? Here is my current status. How can I insert a code pen in an answer here ^^ https://codepen.io/dkx/pen/JjpRgQY 1. the original horizontal scroll effect was performed by this code: let sections = gsap.utils.toArray(".slide"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".main-container", pin: true, scrub: 0.1, ends: "+=3000" } }); @OSUblake... replaced this with a timeline: let sections = gsap.utils.toArray(".slide"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", pin: true, scrub: 0.1, end: "+=2000" } }) .to(sections, { xPercent: -100 * 2, ease: "none", }); tl.to(".list-left", { scale: 0.5, yo-yo: true, repeat: 1 }); tl.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); I'm trying to understand this code now ? The timeline and a scroll trigger for the complete content container of all horizontal sections are created first: let sections = gsap.utils.toArray(".slide"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", pin: true, scrub: 0.1, end: "+=2000" } }) but why does this code set the 3rd section pinned? If I replace the * 2 with a * 3, the 4th section is pinned. I just don't get the point no matter how hard I try to understand. Doesn't the code actually mean that each section gets an xPercent value of -100 * 2, i.e. -200? .to(sections, { xPercent: -100 * 2, ease: "none", }); After that comes this code: tl.to(".list-left", { scale: 0.5, yo-yo: true, repeat: 1 }); but why does a .to step have to come before tl.to(sections...) so that section 3 is pinned? If I remove this .to animation step, then the section does not remain fixed / pinned? I can also change this but I just can't remove it. I think my problem is, since GSAP is still totally new, that I don't yet have an overview of the context of the animations. My original plan, the scrollable list, is slowly but surely becoming functional. However, two things are not entirely clear to me: 1. Does the code I wrote make sense for this animation, or am I making it unnecessarily difficult? This question is important for me to assess whether I understand things correctly or not 2. Why is the "onEnter" callback triggered but not "onEnterBack" when scrolling back? 3. I just saw through the codepen that if the view is not like in my local test environment (1920x1080px monitor) then the scroll triggers don't work properly. Is it correct to work with % values here? How to fix this automatically in GSAP? GSAP is really an exciting topic! I'm looking forward to the day when I understand the technology behind it Thank you for your time and help ?

That was exactly my problem! I couldn't understand how to pin Section 3 and then animate in it. Thank you very much for the example it really helps me a lot. Now I can continue and test here

Hi @OSUblake, thank you very much for your quick answer. I think I might have described it wrong. The animations are supposed to be triggered by scrolling. As soon as the user enters this section 3, the further downward scrolling should jump from link to link (i.e. vertically) and then horizontally at the end to the next section. I had already found out that theoretically I could simply make one section under the other for each text and then scroll through them. But then the other texts in the list above and below are missing in the visible area. I hope I could explain that a little better now. I've only been testing with GSAP for 2 days. I've only used gsap.to so far. The timelines are completely new to me. Although I had understood that timelines run through when triggered, right? That would mean that the user enters section 3 and then the links go through automatically, right? Or can I also control the timeline based on the scroll positions? Thank you very much for your help!

Ok i can now add the Gif example in post before

Hi, I've been experimenting with GSAP and I'm really excited. But from time to time I don't get any further, because unfortunately I don't yet understand all the mechanisms and parameters and I hope you have a tip for me. I want to achieve the following structure: 4 Sections scroll horizontally. The 3rd section stops and shows a text element list on the left and a graphic on the right. The user should navigate through the list by scrolling. The list moves up (disappears) and the next text list element is activated (opacity 1) and shows a different image on the right side. The list should not have a limited number of list text elements. This will be dynamically expanded later. If the last list text element is active, the user scrolls further to the right into the next section. I saw this on another website but unfortunately the mechanism wasn't built with GSAP so I wanted to see if it could be replicated. A Gif is attached. The background change in the animation is not necessary. Can I do this with GSAP? Thank you for your help

@akapowl Hi akapowl, thanks a lot for your quick help. You are really super fast here in the forum. Your example Codepen helps me a lot, that's exactly what I need to be able to continue. Thank you very much! I'll take a look at the SplitText plugin. I wanted to build the animation using individual span elements within the h1 element. I already know how I'm going to do it, but my wording was just wrong. Of course, I didn't want you to provide any code for this. It was important that I could understand how to pin elements in GSAP Thanks again very much and have a nice day !

Hi, I'm still new to the great topic of GSAP and am currently trying out the options a bit. I don't quite understand the topic with the pins and hope you can help me. In an example I have the horizontal scrolling. That also works wonderfully. But now I want to place a text element with several words in the 2nd slide. When entering the slide, only the first word should be legible. If you scroll further, the next word should be displayed for each new slide. The text element must therefore be fixed from slide 2 and remain in place and expand across all other slides. Is that even possible? I've been trying everything I can think of for a week now. Change parameters, CSS and JS code but it just doesn't work. Thank you very much for help