mariovde Posted April 1, 2022 Share Posted April 1, 2022 hi all, I'm having trouble getting pinned sections to work. My page will consist of 6 sections. For debugging purposes, I've created a codepen with only 3. When the second section hits the top of the window, I want it to be pinned. When scrolling further, the section remains pinned, each of the list items needs to get the class "active" and the corresponding block on the left side needs to fade in. When all 3 bullets (and thus divs) have been faded in, the pinned section gets unpinned and the user scrolls further to the next section I cannot get my head around how to do the separate bullet animations. And why the last section overlaps the middle section... I've looked through all examples for scrolltrigger and forum regarding overlapping, but nothing helped so far, to solve this... any help would be appreciated! Thanks! See the Pen OJzxqXd by mariovde-iio (@mariovde-iio) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 1, 2022 Share Posted April 1, 2022 Hello @mariovde Specifically set pinSpacing to true if you need pinSpacing and the parent element of the element you are pinning has flex set From the docs / relevant part is bold: pinSpacing Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. See the Pen xxpXoBj by akapowl (@akapowl) on CodePen Edit: Sorry, I first missed that other part of your post; If you want to tween on different elements in sequence, a timeline would be the best tool of choice. It may also help understanding how durations/the position parameter work on tweens/timelines with a scrub applied. https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub See the Pen RwxLXWX by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
mariovde Posted April 3, 2022 Author Share Posted April 3, 2022 Thanks for the reply! looks good! When I add "once:true" to the scroll trigger, when pinSpacing:true is also set, there is a lot of margin between the sections. any idea how to solve that? 1 Link to comment Share on other sites More sharing options...
akapowl Posted April 3, 2022 Share Posted April 3, 2022 15 minutes ago, mariovde said: When I add "once:true" to the scroll trigger, when pinSpacing:true is also set, there is a lot of margin between the sections. any idea how to solve that? The threads linked in following post should guide you the right way to resolving that 1 Link to comment Share on other sites More sharing options...
mariovde Posted April 4, 2022 Author Share Posted April 4, 2022 Fixed it by adding code to the scrolltrigger. 👍 onLeave: self => { let scroll = self.scroll() - (self.end - self.start); self.kill(); self.scroll(scroll); tl.progress(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