Search the Community
Showing results for tags 'sticky'.
Found 11 results
-
Hello everyone, Hope you all are doing good. I need some assistance on the GSAP scroll trigger. I have a section like this https://prnt.sc/KSmvaP4g6Mdk My requirements and some screenshots are given below: When scrolling down: 1. As the user scrolls, the section becomes sticky, limited to the top portion shown in the screenshot. https://prnt.sc/i6ZtbL_a_5_G 2. Initially, the first content on the left side becomes active, and the right side image matches the first content's image. like this https://prnt.sc/rrkB5EFo6W91 3. When scrolling further, the second content on the left becomes active, and the right side image changes to match the second content's image. 4. This pattern continues, with the third content becoming active, and then the section stops being sticky, allowing the user to move to the next section. When scrolling up: 1. The sticky section reappears at the top, containing the third content on the left, and the right side image matching the third content's image. 2. Scrolling up again activates the second content on the left, changing the right side image accordingly. 3. Similarly, scrolling further up activates the first content on the left, and the right side image updates to match. 4. After the first content is active, the sticky section is no longer sticky, and the user can continue scrolling to the previous section. I have implemented it a little bit in Codepen (link here). But I tried to make it sticky and exactly my requirement. How can I achieve this? -
hello all; its my first post here. ı look arround for this animation but cannot find similar one so ı made my animation. Still have some problem with sticky. Before animation start unset position so GSAP can detect my element hight and place markers in correct points. But ı guess it's still not fine for best practice. I'm open advices and ideas. Thanks all
-
Hey guys, I'm pretty new to GSAP as a whole, so I apologise if I'm missing something obvious! I've been reading the forums and documentation over the past weeks and some of the solutions worked great for some of the issues I found myself into, so thanks for that! I'm trying to achieve the normal behaviour of a position: sticky; element, while enjoying the awesome ScrollSmoother Plugin. I somewhat achieved what I was going after, but the way I did it feels kinda wrong, so I'm guessing if there is a better way to achieve the same result. Please, take a look at the start and end values, pinSpacing doesn't seem to make a difference in this example. Thanks in advance ツ ScrollTrigger.create({ markers: true, trigger: stickyTrack[i], pin: stickyEl[i], start: () => `-=${gsap.getProperty(":root", "--siteHeader-height")}`, end: () => `+=${stickyTrack[i].offsetHeight - stickyEl[i].offsetHeight}`, pinSpacing: false });
-
Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
-
Hi there, I'm trying to do the same animation as this website: https://www.jomor.design/ in the work section half window scroll I'm having trouble getting it. I couldn't figure out how he did it. I kinda mimicked it using position sticky but I had to remove overflow-x: hidden from html & body, and it made huge horizontal scroll since i had many section overflowing. I tried to do it with gsap but the best I can manage is what you can see on codepen. I'm running out of ideas to try, and I'd love some tips please Thanks in advance
-
Hey, Love your work Greensock! I need a little guidance/ advice The animations work as intended, the issue is regarding the text inside the left hand image panels; specifically their behaviour when scrolling up the page. Effect is best seen on larger screen sizes I'm using css flex & position sticky to "stick" them to bottom of their parent, greensock just reveals them at the correct time. All works on the way down, but as you scroll back up weird things happen to the positioning of the element. I'm hoping somebody has a simple solution, as it is very close using this approach. Alternatively could use green sock to also handle the pinning Many Thanks -
We need to fix a particular section and scroll timeline on mouse wheel up & down with sticky title and year. section should be scrollable after timeline end. We have attached a video link:- https://www.dropbox.com/s/7bssu94w4c29cv5/SemaConnect_Motion_Timeline.mp4?dl=0
-
Can anyone help me out this. I just want sticky section with smooth scroll. https://codepen.io/farrukh1194/pen/KKNLOZY
-
Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). I hope I could explain it well, if not, please let me know and will try to elaborate. Best regards Thomas PS: the markup can't be changed
-
Hello I just started out with GreenSock for a one page scroll site, and I have to say, i love it! I'm having a little trouble with something though. I'm trying to make a cinema light, or searchlight if that's a better term. The spotlight has to move around with the mouse and the gradient should stretch/rotate and follow it. I think this demo will make things more clear: http://codepen.io/sugomi/pen/shrDl anyone can help me with this? Thx in advance
-
Hi there, i'm trying to do one of those animations on the header as you scroll down. I want it to be a very nice and smooth transition. I'm trying to do in such a way that i could easily re-use the code in different projects, just changing the timeline animation. Basically, when you scroll down 50px, an animation would play instantly, at the moment i'm adding a class "sticky" to my header, so i can control the position thru css, but i can't get the animation working. I'm sure there's something missing on my code, just can't figure out what it is. $(function() { var header = $(".header"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { header.removeClass('not-sticky').addClass("sticky"); console.log("sticky") } else { header.removeClass("sticky").addClass('not-sticky'); console.log("notsticky") } }); }); var headerAnim = new TimelineLite({}); headerAnim.to(".sticky", 1, {css:{background:'#ccc'}, color:'#fff', ease:Back.easeOut}); //>> animate logo in, etc
