Brodiero Posted August 25, 2020 Share Posted August 25, 2020 Oddly I can't reproduce this in the stripped down codepen but in my own page the pin-spacer adds a calculated top value to my pinned element, giving it an unwanted offset within the layout. my page looks like this <div class="pin-spacer" style="flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: 201.058px; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 557px; height: 2008px; padding: 0px;"><div id="content1-wrapper-list" class=" whereas the stripped down codepen - same gsap but removed css/content - has top:auto <div class="pin-spacer" style="float: none; flex-shrink: 1; display: block; margin: 0px 0px 32px; right: auto; bottom: auto; top: auto; left: auto; position: relative; overflow: visible; box-sizing: border-box; width: 383px; height: 968px; padding: 0px;"><div id="content1-wrapper-list" class="md-col-5 md-col services-list mb3 left-align items-start" style="opacity: 1; visibility: inherit; transform: translate3d(0.5581%, 0px, 0px); left: 0px; top: 0px; margin: 0px; width: 383.328px; height: 1000px; padding: 0px; bottom: auto; right: auto;"><ul class="h2 m0 line-height-3 list-style-none "><li><div class="line-height-1 bold pb2 overflow-hidden from-left-off fade-out" style="opacity: 1; visibility: inherit;">Title</div></li> Any ideas why this may be? See the Pen abNJLvy by brodiero (@brodiero) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2020 Share Posted August 25, 2020 My first guess is that you've got an outdated ScrollTrigger file. Try updating and clearing your cache. Other than that, it's tough to diagnose blind. Worst case: maybe set pinSpacing: false and manually add whatever spacing you need. 2 Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 Thanks Jack. pinSpacing is already set to false and i'm using 3.5.0 across the board, have also emptied cache/tried different browsers. I will rebuild the page and try and find the error. Will report back and findings! Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 It was an erroneous class superseded by another so I missed it, I guess gsap didn't! Thanks for the steer Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 Where am I going wrong with the pin & 'fade-out'? I'm trying to have the list 'content1-wrapper-list' pin, then at the end of pin it should fade out before intersecting with the header. I can get the two to work independently but combined the 'fade-out' triggers ignoring the pin.... Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 It seems to be working to me. What do you think is not working? 1 Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 21 minutes ago, ZachSaucier said: It seems to be working to me. What do you think is not working? The list should pin for the section scroll duration (red or green md-col-7) the each line fade out as it scrolls up. What it appears to be doing is pin, then fades out as the 'original' position reaches the top. Im trying to have a text block pin whilst related images scroll, then as the next section scrolls up the previous pin scrolls out and fades to avoid the header. Commenting out either the 'general fade-out top of viewport' or 'section info pin' illustrates the two things i wish to combine. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 39 minutes ago, Brodiero said: Im trying to have a text block pin whilst related images scroll, then as the next section scrolls up the previous pin scrolls out and fades to avoid the header. That is what it's doing? I see nothing wrong in the demo still. Maybe you just want different start and/or end values for some of your ScrollTriggers? Still not understanding what exactly you're wanting. 1 Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 Sorry if i'm not explaining myself well. Put aside the pinning action for a moment - the text should fade out as 'correct fade' video. Combine that with a pin, the text should pin for the duration of the red section, then fade out as 'correct fade'. instead it pins and fades out immediately, not when it visibly hits the ST start & end parameters. correct fade.mov Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Ah, so you want the text to still move upward even though it's pinned? If you need to keep the same markup I'd fake it by translating the text in the y direction while you start fading it. Given your setup it might require another ScrollTrigger for the container of the text. 1 Link to comment Share on other sites More sharing options...
Brodiero Posted August 26, 2020 Author Share Posted August 26, 2020 5 minutes ago, ZachSaucier said: Ah, so you want the text to still move upward even though it's pinned Kind of, i want it to pin, then when it reaches the end of the pinning it should fade up and out. No need to keep same markup, that's me just piecing together what i know, would you recommend doing it with a designated scrolltrigger/timeline per pin instead? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Maybe someone else can understand what you're trying to do Perhaps it'd be helpful to just start from scratch and try to do it from the bottom up knowing what you know now. If you have a specific question feel free to ask. 1 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