Grene Posted December 20, 2023 Share Posted December 20, 2023 Good evening! I'm having a first go at GSAP in an attempt to create a scrollytelling page. My goal is to have full-screen cards that scroll, but with the option of either fading or scrolling between the background image/color of each card. Previous cards will also fade out 50% as you scroll down. I'm utilizing scroll snapping so that the viewport snaps to each card. The problem I'm having is that the backgrounds of cards where the background is scrolling, as opposed to fading, breaks once I remove all markers. The linked CodePen is a working version with some markers left. Remove the markers on line 26 in the Js file to replicate my issue. The issue appears on Card 4 and 5. I also noticed that some funny things are going on with the border of the page, but that only appears in the pen. Apologies for the repetitive and not-at-all streamlined code. See the Pen QWoLVNw by grene (@grene) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 20, 2023 Solution Share Posted December 20, 2023 Welcome to the forums, @Grene! I don't have time to dig deeply into that right now, but this definitely looks like an issue with the way you're setting everything up CSS-wise. Basically, the markers are "propping open" your container; you shouldn't be relying on them to do that. You're literally changing the positioning of elements inside the scroller so that when they're active they jump to a totally different "top" value which could alter how tall the container is (how much scrollable area there is). Why are you using a <div> as the scroller instead of the body? It's fine to do that, I'm just curious. You're ending up with a <body> that has a scrollbar AND a child element (your scroller) that has ANOTHER vertical scrollbar. It just seems very confusing and convoluted to me, fraught with CSS/layout-related "gotchas". And all your JS is waaaaay too verbose and repetitive. Imagine you've got an 800px container with contents that are 1000px tall, thus it can scroll 200px total. Then you create a ScrollTrigger with start: 500 which means it'll start when the scroll position is 500...but you only have 200px max to scroll, so you'll NEVER hit that! But if you enable markers, it'll drop a marker at that spot...which is another <div>, thus it props open your container so that now it can technically scroll to 500px, but only if you enable markers. This is NOT a bug in ScrollTrigger. It's just a logical consequence of enabling markers. The REAL problem is how you set up your page where it's impossible to ever reach that scroll position that you're setting up your triggers to trigger at. See what I mean? 1 1 Link to comment Share on other sites More sharing options...
Grene Posted December 20, 2023 Author Share Posted December 20, 2023 1 hour ago, GreenSock said: Welcome to the forums, @Grene! I don't have time to dig deeply into that right now, but this definitely looks like an issue with the way you're setting everything up CSS-wise. Basically, the markers are "propping open" your container; you shouldn't be relying on them to do that. You're literally changing the positioning of elements inside the scroller so that when they're active they jump to a totally different "top" value which could alter how tall the container is (how much scrollable area there is). Why are you using a <div> as the scroller instead of the body? It's fine to do that, I'm just curious. You're ending up with a <body> that has a scrollbar AND a child element (your scroller) that has ANOTHER vertical scrollbar. It just seems very confusing and convoluted to me, fraught with CSS/layout-related "gotchas". And all your JS is waaaaay too verbose and repetitive. Imagine you've got an 800px container with contents that are 1000px tall, thus it can scroll 200px total. Then you create a ScrollTrigger with start: 500 which means it'll start when the scroll position is 500...but you only have 200px max to scroll, so you'll NEVER hit that! But if you enable markers, it'll drop a marker at that spot...which is another <div>, thus it props open your container so that now it can technically scroll to 500px, but only if you enable markers. This is NOT a bug in ScrollTrigger. It's just a logical consequence of enabling markers. The REAL problem is how you set up your page where it's impossible to ever reach that scroll position that you're setting up your triggers to trigger at. See what I mean? Thank you! The reason I'm using a div as the scroller is because, as far as I'm aware, CSS scroll snapping only works on the window scroll of a container. But maybe I'm wrong? The reason I've used 'top' to position backgrounds 4 and 5 is to align them with their corresponding cards (cards and backgrounds are separate divs). The cards have a relative position, while the backgrounds by default are stacked on top of each other with a fixed position. I do this because most of the time, I want to fade between the backgrounds as you scroll down through the cards. It's only rarely that I want the backgrounds to stick with the cards as you scroll between them, e.g. like between card 4 and 5 in this example. By setting the position of backgrounds 4 and 5 to absolute, and positioning them at 'top: 400vh' 'top: 500vh', I'm trying to simulate how they would be positioned in the flow below background 0, 1, 2 and 3 if those didn't have fixed positions. That way backgrounds 4 and 5 align correctly with cards 4 and 5. I didn't think the markers were propping the container open because the positions of the cards are relative, so I thought the cards already were propping the container open. E.g. you can still scroll down further to card 6, which works correctly. But I'm by no means confident in the logic here 😅 And yes, the Js is way too repetitive! I've done it like this for now so that I can see and adjust everything manually, as it's my first time using Js to this extent and I'm very much experimenting. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 20, 2023 Share Posted December 20, 2023 Hi, Maybe this guide by @mvaneijgen, one of our superstars, can provide a good starting point: Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
Grene Posted December 20, 2023 Author Share Posted December 20, 2023 40 minutes ago, Grene said: Thank you! The reason I'm using a div as the scroller is because, as far as I'm aware, CSS scroll snapping only works on the window scroll of a container. But maybe I'm wrong? The reason I've used 'top' to position backgrounds 4 and 5 is to align them with their corresponding cards (cards and backgrounds are separate divs). The cards have a relative position, while the backgrounds by default are stacked on top of each other with a fixed position. I do this because most of the time, I want to fade between the backgrounds as you scroll down through the cards. It's only rarely that I want the backgrounds to stick with the cards as you scroll between them, e.g. like between card 4 and 5 in this example. By setting the position of backgrounds 4 and 5 to absolute, and positioning them at 'top: 400vh' 'top: 500vh', I'm trying to simulate how they would be positioned in the flow below background 0, 1, 2 and 3 if those didn't have fixed positions. That way backgrounds 4 and 5 align correctly with cards 4 and 5. I didn't think the markers were propping the container open because the positions of the cards are relative, so I thought the cards already were propping the container open. E.g. you can still scroll down further to card 6, which works correctly. But I'm by no means confident in the logic here 😅 And yes, the Js is way too repetitive! I've done it like this for now so that I can see and adjust everything manually, as it's my first time using Js to this extent and I'm very much experimenting. Okay so, yes; without the markers, 'top' isn't relative to the top of the cards inside the scroller of the container, but rather the top border of the container. My head still struggles to wrap my head around why the markers and cards are different in that respect, when the scrolltrigger markers are literally defined by the cards, but I'll have to knead that logic some more. 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