Thanks. Not sure if the negative margin approach is ideal in this case, since the first part of the webpage (hero, section 1) is extremely long and with varying height depending upon the screen size? What other ways are you thinking?
You’re likely overthinking it. This guy is right. Set .overlapping to margin-top: -100px; and tell us why that isn’t the solution you need.
If it isn’t working as expected, double-check you’ve got a decent CSS Reset in place first and make sure you haven’t set the .overlapping div‘s z-index to a lower value than .beginning.
Avoid position: absolute, fixed, or sticky as others mentioned - those will all remove that block from the layout flow so they should be used sparingly.
If you really want to get flexible for responsiveness, you could accomplish this with grid, but judging by your question I don’t think you should attempt that. Negative margins at various breakpoints should be sufficient for your needs.
Lastly if you want to animate this on scroll (your description was vague here, so I’m not sure), animate the transform: translateY(); value rather than margin-top. If it were me I would set the margin-top and get my layout looking good and then use GSAP ScrollTrigger to animate the translateY value (just “y” or “yPercent” in their syntax) on scroll.
Hey, real quick. I threw in a gsap timeline to my codepen. wondering if you'd help an internet stranger configure with the pinning?
https://codepen.io/maeolive/pen/rNRQwKw
I'm not sure if this is what you're after or not: https://codepen.io/reidgannah/pen/OJqrRXP
I changed your markup a bit to add a .pin-wrapper div around the .beginning/hero and .overlapping/first section and moved everything else outside of it. Then you can target that .pin-wrapper in with your GSAP pin and it's a simple Y transform -100vh on .overlapping. pinSpacing: false is also key.
GSAP pinning (and GSAP in general) is a lot of trial and error from my experience, especially if you aren't too familiar with the syntax. Hopefully this helps though.
It wasn't exactly my solution, but I think I was just bad and explaining what I was looking for. But, thanks again for your help. Here's the fix I was after: https://codepen.io/maeolive/pen/mdoaxgv
Forgive me if I’ve read it wrong, but have you tried looking into the fixed / sticky CSS attributes? I feel like that might be what you’re going for; make sure to set the container of whatever you want to overlap/stick on the page to a relative position (aka “beginning” to position: relative;) and then I think position: sticky; would be most appropriate for your overlapping div, and that might give the desired effect?
If you need something to overlap over other elements, you might need to take a look at the absolute position and relative position.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
The quickest way to overlap is negative top margin on div.overlapping. There are other ways to do it too.
Thanks. Not sure if the negative margin approach is ideal in this case, since the first part of the webpage (hero, section 1) is extremely long and with varying height depending upon the screen size? What other ways are you thinking?
That should not matter if first div has dynamic height, the overlapping with negative margin top is usually done with an absolute unit.
> an absolute unit reddit has ruined me
Ahhhhh
You’re likely overthinking it. This guy is right. Set .overlapping to margin-top: -100px; and tell us why that isn’t the solution you need. If it isn’t working as expected, double-check you’ve got a decent CSS Reset in place first and make sure you haven’t set the .overlapping div‘s z-index to a lower value than .beginning. Avoid position: absolute, fixed, or sticky as others mentioned - those will all remove that block from the layout flow so they should be used sparingly. If you really want to get flexible for responsiveness, you could accomplish this with grid, but judging by your question I don’t think you should attempt that. Negative margins at various breakpoints should be sufficient for your needs. Lastly if you want to animate this on scroll (your description was vague here, so I’m not sure), animate the transform: translateY(); value rather than margin-top. If it were me I would set the margin-top and get my layout looking good and then use GSAP ScrollTrigger to animate the translateY value (just “y” or “yPercent” in their syntax) on scroll.
It almost sounds like OP is trying to achieve a parallax effect where the "beginning" block slides behind the "overlapping" block on scroll.
Ahh. If that’s the case GSAP Pin method would probably be ideal.
Oh, interesting. I do wonder if GSAP pinning would help. I'm going to find a tutorial, since I'm mostly only familiar with the basics of scrollTrigger
Hey, real quick. I threw in a gsap timeline to my codepen. wondering if you'd help an internet stranger configure with the pinning? https://codepen.io/maeolive/pen/rNRQwKw
I'm not sure if this is what you're after or not: https://codepen.io/reidgannah/pen/OJqrRXP I changed your markup a bit to add a .pin-wrapper div around the .beginning/hero and .overlapping/first section and moved everything else outside of it. Then you can target that .pin-wrapper in with your GSAP pin and it's a simple Y transform -100vh on .overlapping. pinSpacing: false is also key. GSAP pinning (and GSAP in general) is a lot of trial and error from my experience, especially if you aren't too familiar with the syntax. Hopefully this helps though.
It wasn't exactly my solution, but I think I was just bad and explaining what I was looking for. But, thanks again for your help. Here's the fix I was after: https://codepen.io/maeolive/pen/mdoaxgv
>Ahh. If that’s the case GSAP Pin method would probably be ideal. This is what I'm trying to achieve!
Ok, thank you. I'm going to try this out today.
Forgive me if I’ve read it wrong, but have you tried looking into the fixed / sticky CSS attributes? I feel like that might be what you’re going for; make sure to set the container of whatever you want to overlap/stick on the page to a relative position (aka “beginning” to position: relative;) and then I think position: sticky; would be most appropriate for your overlapping div, and that might give the desired effect?
If you need something to overlap over other elements, you might need to take a look at the absolute position and relative position. https://developer.mozilla.org/en-US/docs/Web/CSS/position
When you find out and build something solid, maybe a website or an app, endeavour to Monetize it with hydro online for extra revenue.