Sanjeet M Posted August 1, 2022 Share Posted August 1, 2022 Hello I am new to using GSAP 3 ScrollTrigger. I have this '.extra-long-container' which as the name suggests is very long horizontally (Width: 7000px). In it there could be multiple elements placed at any 'x' position. I have only placed one box ('.box1') in the codepen example but there could be many. Basically I want them to animate when they come into viewport horizontally. Note: For this I did not want both the scrollbars to display. Due to the scrollbars being hidden the JS 'scroll' event does not fire. So I had to write a custom function to perform horizontal scroll on 'mousewheel' event ('onscroll' function in JS). I have seen a lot of answers in forum, Codepen demos: eg: See the Pen mdrrbyo by oldskool123 (@oldskool123) on CodePen , Container animation, some videos eg. this, this but they all have panels (full width & height talking panels as children) in them which I don't want. I only want to place some elements/objects at specific positions in container. They also have a vertical scrollbar in them which I do not want. I do not want either of the scrollbars. Also as you can see in the demo the 'box1' is not at it's default position(It has been applied a transform). I have no idea why. It would be helpful if you could answer that aswell. Please reply if you have any doubts. This is my demo Codepen link: See the Pen GRxyBZj by msanjeetaxioned (@msanjeetaxioned) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 1, 2022 Share Posted August 1, 2022 Have you seen there is a plugin to watch for any touch events. See https://greensock.com/docs/v3/Plugins/Observer, no need to hack ScrollTrigger if that is what you want. I'm not completely sure what you are looking for, but it looks like you don't want things to happen on the scrollbar position, but that is how ScrollTrigger works. If you don't want to animate on the scroll position check the Observer plugin or if you do want thinks to happen on scroll, but not have scrollbars, just hide the scrollbars with CSS ::-webkit-scrollbar { display: none; } 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 1, 2022 Share Posted August 1, 2022 *I would very much advise against hiding the scrollbar for accessibility reasons though. Also you don't have to visually have panels with containerAnimation. You can style the panels however you want, or even just have one container animating along the x axis. See the Pen poLpxyN by GreenSock (@GreenSock) on CodePen 4 1 Link to comment Share on other sites More sharing options...
Sanjeet M Posted August 1, 2022 Author Share Posted August 1, 2022 Thanks for the answers. @Cassie I need to hide the scrollbars as it's required. I have tried doing it using 'containerAnimation' aswell. Here is the demo: See the Pen NWYXEoB?editors=1010 by msanjeetaxioned (@msanjeetaxioned) on CodePen But it does not work. If you turn the markers 'on'(please make sure to view this on a big screen as the markers make scrollbars appear if they are outside the display area) ,you can see that the 'start/end' markers don't move with the '.box1' element when the '.main-container' is scrolled. It shows that the 'ScrollTrigger' does not work for the custom scroll function I have written. Can you let me know if I have done/used something wrong in this demo? Or have any solutions to this? Link to comment Share on other sites More sharing options...
Cassie Posted August 1, 2022 Share Posted August 1, 2022 So in your example 'scrollTween' isn't actually animating anything. You're animating scrollLeft in an anScroll event. That's not going to work. ContainerAnimation relies on a container being animated using a GSAP tween and then that tween being referenced as the 'container animation' See the Pen dymJaXg?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sanjeet M Posted August 1, 2022 Author Share Posted August 1, 2022 Okay, thanks. So now I understood what the 'containerAnimation' does. So this will not do anything in my project? So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation? I wanted to create something similar to this https://sarahfatmi.com/en The above site is created using GSAP3, so what I am trying to achieve should technically be possible. I tried to see it's code but failed to understand it, as it's a bit too complicated. Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given. They should also reverse on scroll back (Basically 'scrub' behaviour). Similar to the linked site.@Cassie Thanks for the answers. Link to comment Share on other sites More sharing options...
Cassie Posted August 1, 2022 Share Posted August 1, 2022 That's a cute site! I don't understand what you mean by this though. Quote So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation? We've shown you multiple ways this can be achieved! There are many working demos in this thread now. Am I missing something? Quote Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given This is exactly what the demo I just linked to is doing Are you asking about hiding the scrollbar? If so, although it's terrible practice for accessibility - that was also answered by @mvaneijgen ::-webkit-scrollbar { display: none; } 1 Link to comment Share on other sites More sharing options...
Sanjeet M Posted August 1, 2022 Author Share Posted August 1, 2022 1 hour ago, Cassie said: We've shown you multiple ways this can be achieved! There are many working demos in this thread now. Am I missing something? I am sorry but those demos are completely different. I do not have panels/sections inside. I learnt the following from your previous comment. The 'containerAnimation' scrolls to the next panel/section & to the previous panel/section if scrolled back. Those panels are also 'pinned'. My container does not have full width/full height taking panels/sections. I have written a custom scroll function to scroll forward/ back '20px' (Could be any value given) of the container. Anyways I was able to solve my demo See the Pen NWYXEoB by msanjeetaxioned (@msanjeetaxioned) on CodePen , after seeing this example. See the Pen eYpOZvX by GreenSock (@GreenSock) on CodePen This above demo & the site I linked in my previous post is similar to what I wanted to achieve. In that I also used display: none for scrollbar. So thanks @mvaneijgen for that and thanks @Cassie for replying so many times. Link to comment Share on other sites More sharing options...
Cassie Posted August 1, 2022 Share Posted August 1, 2022 This demo that I already gave you in the above answer doesn't have any panels or sections inside either. I think maybe you missed that one? Either way. Glad you figured it out. See the Pen dymJaXg?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Hi guys, I am using gsap for horizontal scroll, but now I am stuck at a point where I have a dynamic list of horizontal cards.But the the section is taking fixed width and thus all the cards not visible in thet section. Please help.I am new to gsap here is my code, please check panel-5 with cards-wrapper See the Pen gOdvBZo by codertacina (@codertacina) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 13, 2023 Share Posted March 13, 2023 Hey there - These demos are set up to achieve a certain effect, so just adjusting the markup like this isn't going to work. You'll have to adjust how the CSS is styling the elements and also the logic surrounding the tweening. Here's a start for you, I adjusted the sizing of the last container so that it doesn't collapse in a flex container and also changed the amount each panel was moving - hope it helps! See the Pen ZEMrmVB?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Hi @Cassie Thanks for the reply, this somewhat solves my problem.Now I am facing issue with the navigation so if i click on panel 2 then it take me to the center of panel 2 Link to comment Share on other sites More sharing options...
Cassie Posted March 13, 2023 Share Posted March 13, 2023 Yep - same as the previous issue, that logic was written explicitly for the setup in the previous demo. Here's an adjustment - See the Pen ZEMrmVB?editors=0011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Hi @Cassie Thank you for you help. But still I am facing issue in my code.Can you please check once. See the Pen VwGQNEo by codertacina (@codertacina) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 13, 2023 Share Posted March 13, 2023 Sorry that codepen is a bit too messy for me to parse and I don't really know what the issue you're facing is. I'd suggest stripping it back to *just* the functionality you're struggling with or starting from something simpler and gradually layering content and functionality in. Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Hi @Cassie Thanks for the reply here is a less messy code.the issue i am facing is that i am using bootstrap in my webpage and the card items are not taking fixed width,and also when i click on the navigation again and again,it acts weird. here is my new code See the Pen VwGQNEo by codertacina (@codertacina) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 13, 2023 Share Posted March 13, 2023 I'm afraid I can't help with bootstrap - but you haven't copied over the CSS from the demo I put together and you have a bunch more CSS in there that's conflicting, overflow hidden on containers, more flex containers that have children that are collapsing. This is a great guide if you're confusedhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ I'm not sure what's going on with the anchor links I'm afraid - I'd largely just be playing spot the difference so why don't you give it a go? Log out some values and try working out what's happening in the working demo as opposed to what's happening in the broken one. See the Pen oNPEKMO?editors=0011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Ok thanks @Cassie let me try that way 1 Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 I think everything is working fine in code.It seems to be an issue because the functionality to make current navigation active is not working correctly.Is there any other way to make the current navigation active other than using onUpdate option? Link to comment Share on other sites More sharing options...
codertacina Posted March 13, 2023 Share Posted March 13, 2023 Hi @Cassie I have this onUpdate code its giving me wrong section id onUpdate: (self) => { const slideIndex = Math.round(self.progress * (slides.length - 1)); const slideId = slides[slideIndex].id; console.log(slideId); updateActiveNav(slideId); updatePrevNext(slideId); }, Link to comment Share on other sites More sharing options...
Cassie Posted March 13, 2023 Share Posted March 13, 2023 Yep - it would be giving you the wrong section, that's also been written with a different use case in mind. I'm afraid I don't have time to do this entirely for you but here's a fork with some useful console logs I've added in You've already got the number value for each section, (I logged it out for you) you'll have to save those values somehow and check for them in the onUpdate, then when you hit them you can change the nav highlight. See the Pen rNZdVdg?editors=0011 by GreenSock (@GreenSock) on CodePen Hope this nudge helps! 1 Link to comment Share on other sites More sharing options...
codertacina Posted March 14, 2023 Share Posted March 14, 2023 Thank you @Cassie I was able to fix it. Thanks again. 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 14, 2023 Share Posted March 14, 2023 Nicely done! Link to comment Share on other sites More sharing options...
neonerve Posted June 19, 2023 Share Posted June 19, 2023 Hi All, Also I'm very new to the world of GSAP and i've having difficulties implementing the scroll effect. I am using Oxygen Builder and have a container with a repeater inside it which could grow to any width (off screen). I would like this to become the part which GSAP horizontal scroll takes over from - but even with endless tinkering, I can't seem to recreate what i am looking for. The main issues are that all demos seem to have a fixed 400% for 4 full width sections. I would like to set my widths of divs within the container independently and I don't neccessily need them to snap to the start of each div as this would be created within a repeater anyway. Example of what i would like to achieve on 'career' section of https://www.alexalbon.com/ Is anyone able to help? Many thanks in advance Link to comment Share on other sites More sharing options...
Rodrigo Posted June 19, 2023 Share Posted June 19, 2023 Hi @neonerve and welcome to the GreenSock forums! Is really hard for us to give any help without a minimal demo. There are tens of examples in the forums about horizontal scrolling with widths different than 100% of the browser window: Those are just three. Hopefully that helps. If you keep having issues, please create a minimal demo that illustrates the problems you're having. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now