deJardine Posted October 5, 2021 Share Posted October 5, 2021 Hi there, This might be an edge case, but I'm trying to create a position:sticky element inside a scrolltrigger. It seems to incorrectly stick the position the "Sticky Bar" div as the parent uses a translate to pin the scrollTrigger (which affects the position of the sticky bar). Are there any workarounds for this type of setup? See the Pen BaZgWOj by grafiknz (@grafiknz) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 6, 2021 Share Posted October 6, 2021 It is definitely an edge case where position: sticky just won't work but you could use ScrollTrigger to create a similar effect (if I understand your goal correctly): See the Pen gORNVoN?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 1 3 Link to comment Share on other sites More sharing options...
deJardine Posted October 6, 2021 Author Share Posted October 6, 2021 Thanks, great! that solves it (had no idea you could nest scrolltriggers!) could I also use pinReparent ? Link to comment Share on other sites More sharing options...
GreenSock Posted October 6, 2021 Share Posted October 6, 2021 Why would you want to use pinReparent? It's only intended as a last resort in some very tricky situations, but I'd recommend avoiding it if you can because it's expensive and tricky. Link to comment Share on other sites More sharing options...
deJardine Posted October 6, 2021 Author Share Posted October 6, 2021 Great, thanks Link to comment Share on other sites More sharing options...
joris-rotteveel Posted October 13, 2021 Share Posted October 13, 2021 @GreenSock I am trying to the same thing, but without any content between the sticky and the curtain. I've adjusted your example here, See the Pen YzxXZgx by joris-rotteveel (@joris-rotteveel) on CodePen . Unfortunately, the black box scrolls down when scrolling before pinning. Is this possible you think? Link to comment Share on other sites More sharing options...
GreenSock Posted October 13, 2021 Share Posted October 13, 2021 You really can't have two nested pinned elements simultaneously. In other words, you're trying to pin an element whose ancestor is also simultaneously pinned. You could just tell that nested element's ScrollTrigger to start when the ancestor's is finished. In this case, it's simple because we can use the .previous() method to grab that ScrollTrigger and use its end: start: self => self.previous().end See the Pen GRvJezp?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 2 Link to comment Share on other sites More sharing options...
joris-rotteveel Posted October 13, 2021 Share Posted October 13, 2021 @GreenSock So the order of creation would be important here. This is definitely a great new way of dealing with it! Will look into the docs and dig a bit deeper. Thanks a million for your help. This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum! 1 1 Link to comment Share on other sites More sharing options...
Wiktoria Posted May 12, 2022 Share Posted May 12, 2022 @GreenSock Thank you for your answers. I have two fixed menus on a page, and the top menu should be hidden when you scroll up. Is it possible to make the position of the bottom fixed menu when scrolling upwards not start from zero, but depend on the height of the top menu and when scrolling upwards both the top and bottom menu will be visible. See the Pen dydXamm?editors=1111 by Wikt (@Wikt) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 12, 2022 Share Posted May 12, 2022 I read your post a few times and I don't really understand what you're asking. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my list of requirements, please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Lastly, it's typically best to create a new thread instead of piggy-backing on very old ones. 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 15, 2022 Share Posted October 15, 2022 Hi all, following this thread old (sorry) On this sticky sections See the Pen RwydaLr by DedaloD (@DedaloD) on CodePen is it possible to any scrolltrigger animation inside some of sticked containers, while they come into viewport? I couldnt use a pin because, on the full project, there's a container with smooth scroll (kinda like with translate 3D and a fixed body) and this breaks any. pinned section. (I tried also with scroltrigger's rules: Repaint, scroller.. nothing worked.) Do I need to use intersection observer? Example (just to say something): scale each "chapter" title: to(1.2) Just to know, thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted October 15, 2022 Share Posted October 15, 2022 Hi @Dennyno, I don't have a lot of experience with sticky elements, so I can't offer a lot of advice on how to use ScrollTrigger in a general setup fashion. But keep in mind that one of the key things ScrollTrigger does is keep track of when an element is in the viewport or between two different points of the document, so that can be achieved in a rather simple way: See the Pen PoeLBwK by GreenSock (@GreenSock) on CodePen Now I can't guarantee you that this will work flawlessly on every single browser, but the testing I did on the latest Firefox and Chrome on Ubuntu 20 and 22 seem to work as expected. Let us know if you have any other question. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted October 15, 2022 Share Posted October 15, 2022 8 hours ago, Dennyno said: I couldn't use a pin because, on the full project, there's a container with smooth scroll (kinda like with translate 3D and a fixed body) and this breaks any. pinned section. (I tried also with scroltrigger's rules: Repaint, scroller.. nothing worked.) Did you try pinType: "transform"? Just curious. If your pinned element is inside a container that has ANY transform applied, the browser creates a new stacking context and then position: fixed behaves in a COMPLETELY different way (treats the transformed parent as if it's the "viewport", moving with it...this is a browser thing, not a GSAP thing). 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 24, 2022 Share Posted October 24, 2022 On 10/15/2022 at 7:21 PM, GreenSock said: Did you try pinType: "transform"? Just curious. If your pinned element is inside a container that has ANY transform applied, the browser creates a new stacking context and then position: fixed behaves in a COMPLETELY different way (treats the transformed parent as if it's the "viewport", moving with it...this is a browser thing, not a GSAP thing). @GreenSock Jack, never mind, but "display:contents" has been a killer trick to solve the problem with the transforming (fixed/sticky) container! This is something totally cool. Even if.. I guess, the smooth scroll feature is mitigate using this CSS rule, but could be an easy fix to test both, as needed, without touching other libs (if present), nor removing Scrolltrigger / Scrollsmoother 2 Link to comment Share on other sites More sharing options...
Dennyno Posted October 25, 2022 Share Posted October 25, 2022 On 10/15/2022 at 7:04 PM, Rodrigo said: Hi @Dennyno, I don't have a lot of experience with sticky elements, so I can't offer a lot of advice on how to use ScrollTrigger in a general setup fashion. But keep in mind that one of the key things ScrollTrigger does is keep track of when an element is in the viewport or between two different points of the document, so that can be achieved in a rather simple way: Now I can't guarantee you that this will work flawlessly on every single browser, but the testing I did on the latest Firefox and Chrome on Ubuntu 20 and 22 seem to work as expected. Let us know if you have any other question. Happy Tweening! Just seen now this solution! This is an extra thing I'd have needed latelly, so thanks twice Jack! Now, talking for talking, and going deep: Using the text scramble plugin, or any other (gonna check in all gsap premium extensions, maybe the split-text one): Is possible to scramble text from dots, to reveal text dinamically? Is not a "real random shuffle" as GSAP Scramble does, but more a "replace".. hope getting understood. Example: "...." became "hello" by scrolling? This can be done manually with 2 absolute elements, just asking if is doable in plain JS, avoiding to write twice the markup each time... Thanks, below an example with the "manual markup way". See the Pen zYzPryN by Mamboleoo (@Mamboleoo) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 25, 2022 Share Posted October 25, 2022 This is the way I'd do it, Nice and accessible with the aria hidden too. Good job! 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 25, 2022 Share Posted October 25, 2022 5 minutes ago, Cassie said: This is the way I'd do it, Nice and accessible with the aria hidden too. Good job! Hi Cassie, nice to hear from you! PS I'd like to get one of your hats! 🧢 😅 Btw, is this something doable via js? Basically: split this text, then cloneNode, then change each char to a dot, then again create an aria-hidden elem and append after the original node? Or this way is too tricky? *not asking to do it, and I don't actually need it, just to know something new and learn ⚫️🤙 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