nami Posted April 14, 2021 Share Posted April 14, 2021 Hey! So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker gets past the center. My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets past it? I hope my question was clear See the Pen b6f163b464502cef5b5ac411394b120b by akapowl (@akapowl) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 15, 2021 Share Posted April 15, 2021 Hi @nami. Are you saying you think the "start" is literally 1 pixel off or something? If I understand your goal correctly, you could simply do 50%-=1px or something. It's pretty flexible. Link to comment Share on other sites More sharing options...
nami Posted April 19, 2021 Author Share Posted April 19, 2021 See the Pen MWJqEeo by imane-ben (@imane-ben) on CodePen So many things are wrong now, I have tried your solution and i guess it works, but between every panel, some weird spacing gets added ( between the end of one panel and the start of the other). Not sure what is causing it. Also, how do i slow down the scrolling on the horizontal scroll so the last and first panel can stay a bit on the view port? I have tried the duration attribute and setting the scrubbing to 5 for instance but it didn't seem to do much. Many thanks. Link to comment Share on other sites More sharing options...
GreenSock Posted April 20, 2021 Share Posted April 20, 2021 13 hours ago, nami said: some weird spacing gets added ( between the end of one panel and the start of the other). Not sure what is causing it. I'm not quite sure what you mean. There's over 200 lines of JS - can you provide a more minimal demo that only shows this one issue (and doesn't try to do all the other stuff like animations and Draggable and horizontal scrolls, etc.)? It looks like you're pinning the panels, but you disabled pinSpacing, so that'll create overlaps logically. In other words, your element will get pinned for a while, but the thing under it will keep scrolling up (hence the overlap). That's not a bug. Maybe you should delete the pinSpacing: false line. 13 hours ago, nami said: how do i slow down the scrolling on the horizontal scroll Please read https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub You should adjust the "end" value accordingly, not the duration of your animations. Like: // OLD end: () => "+=" + scrollContainer.offsetWidth, // NEW end: () => "+=" + scrollContainer.offsetWidth * 2, // twice as long // OR hard-code a certain value end: "+=3000" You're using mis-matched versions of things (3.3.1 of most things, but 3.6.1 of Draggable). I'd strongly recommend using the latest version of everything (3.6.1). In fact, some of the snapping features you're trying to tap into didn't exist in 3.3.1. You tried setting duration:"150%" and an opacity on a ScrollTrigger, but those are invalid. There are no such properties on a ScrollTrigger. You were creating the ScrollTriggers out-of-order. We STRONGLY recommend creating them in the order they appear on the page, but if you can't do that, you can usually work around it by calling ScrollTrigger.sort() after you're done creating them all. 14 hours ago, nami said: so the last and first panel can stay a bit on the view port? I have tried the duration attribute and setting the scrubbing to 5 for instance but it didn't seem to do much. You want the first and last horizontally-scrolling sections to stay still for a while? You'd just need to put the horizontal scroll into a timeline that has some extra [empty] space in the beginning and end for whatever proportion you want them to stay stuck. I'm not really sure what effects you were aiming for, but here's a fork of your CodePen that has some of the fixes in place: See the Pen 39d23ae68266036e95d4defaaec656e8 by GreenSock (@GreenSock) on CodePen Good luck! 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