acolyte Posted July 14, 2022 Share Posted July 14, 2022 Hello there, I'm trying to add Scrolltriggers inside the first of three pinned panels that is longuer than the viewport. Unfortunately, it seems that the further the element is from the top of the pannel, the greater the trigger's offset is. I tried playing with the order of my animations, using refresh() and sort(). No luck. In this CodePen, there are multiple text elements with the same selector. If you remove the JS for the pinned panels (and edit some css), the triggers work as intended. Does anyone have an idea how to properly assign the triggers inside these panels? See the Pen NWYbpXo by misterawesome (@misterawesome) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 14, 2022 Share Posted July 14, 2022 Welcome to the forums, @acolyte. I noticed several problems: You're animating the very thing(s) you're using as triggers on the y-axis which will of course throw off the calculated start/end scroll positions. You're also pinning the container without specifying pinnedContainer in the children's ScrollTriggers. I'm trying to understand your intent here - why pin and also animate the yPercent? Are you trying to make the background stay while the rest appears to scroll normally? Once we understand your goal, perhaps we can suggest a better, cleaner approach. Link to comment Share on other sites More sharing options...
acolyte Posted July 15, 2022 Author Share Posted July 15, 2022 Good morning Jack, The page's main content will be in the first white section. Its height needs to be fluid as it may contain many elements. The first goal is to reveal the following pinned panels (blue then black) just like this pen. Here's an inspiration (see the footer at the bottom). See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen I also plan on animating different elements inside the main section using ScrollTrigger (like this data-fade). It may be because I am a newbie to GSAP, but i find the ScrollTrigger's doc to be somewhat lacking. I find no referrence to this pinnedContainer you are referring. I found it mentionned in the Cheatsheet, but without explaination on what it does exactly. Thank you for your time. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 15, 2022 Share Posted July 15, 2022 Hi there! I just did a quick search of the ScrollTrigger docs (CMD + F) pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0) 1 Link to comment Share on other sites More sharing options...
acolyte Posted July 15, 2022 Author Share Posted July 15, 2022 2 hours ago, Cassie said: Hi there! I just did a quick search of the ScrollTrigger docs (CMD + F) pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0) Hi Cassie, thank you for your response! My bad, i was trying to use the search input. I guess it just searches in the title. 1 Link to comment Share on other sites More sharing options...
acolyte Posted July 15, 2022 Author Share Posted July 15, 2022 Also, I have updated the CodePen to use pinnedContainer with its parent pinned panel but this doesn't seem to solve my issue. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 15, 2022 Solution Share Posted July 15, 2022 You don't need to pin that container at all. This is mostly about your setup, markup, and CSS. See the Pen BarpaJW?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 15, 2022 Share Posted July 15, 2022 4 hours ago, acolyte said: Hi Cassie, thank you for your response! My bad, i was trying to use the search input. I guess it just searches in the title. That's really helpful feedback - thank you! 1 Link to comment Share on other sites More sharing options...
acolyte Posted July 18, 2022 Author Share Posted July 18, 2022 On 7/15/2022 at 5:26 PM, GreenSock said: You don't need to pin that container at all. This is mostly about your setup, markup, and CSS. Is that what you're looking for? This is exactly what I am looking for! I'll try to use this as a foundation for my main layout. Thank you very much. I hope I was not too much of a burden. Link to comment Share on other sites More sharing options...
GreenSock Posted July 18, 2022 Share Posted July 18, 2022 1 hour ago, acolyte said: Thank you very much. I hope I was not too much of a burden. No problem. Very happy to hear it helped. And yeah, thinking through the HTML structure, CSS rules, and logic is typically the toughest part. Enjoy! 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