Jump to content
Search Community

Pinning divs on top of each other vertically but below certain divs

jofairden test
Moderator Tag

Recommended Posts

Im having some trouble with this code... Mind you I am new to GSAP so I am likely missing something obvious.

 

I have a simple page with 3 main elements:

- navbar

- header (logo / slogan)
- main content

 

Now I want the main content to scroll in a specific way. Rather than scrolling down on the page, I want the navbar and header to stay in place. When scrolling down, I want the top div in the main content to stay put, but each individual div after to scroll up (Vertically) on top of the previous one.. So basically the section overlap as you scroll.. I've tried for hours and can't seem to get it to work properly..

They dont have to snap necessarily.. I want it to feel smooth.. What I am struggling with specifically is:
- How do I control where the pin goes exactly? I want it to start right away when scrolling.. Right now the divs snap really weird when scrolling.. The main behavior seems okay.. But they also for some reason overlap and you can't see all the content..

- How do I fade out the previous div as the next one comes on top of it? Something with opacity? I can't seem to figure this out, but it seems to me GSAP can do this

See the Pen rNdqPGQ by jofairden (@jofairden) on CodePen

Link to comment
Share on other sites

Hi @jofairden welcome to the forum!

 

I had to remove your CSS and other stuff, because they where part of the assets and where not accessible for me and to make sure there where no conflicts disabling them seemed to be the easiest way.

 

See the Pen PoRyLzQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

You control the start of each ScrollTrigger with the `start:` triggers, I've set it to the top of the element with the top of the browser. If you want it to start directly when the page loads you'll have to calculate how much the first div is offset from the top of the page. I've also changed you're `end:` trigger to be the bottom of the element, I think 'max' is the full height of the scrollable area, so that is not what you want in this case

 

See the Pen KKoGEaE?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

I think to learn ScrollTrigger you'll need to take it slow and see things step by step, so what do you think of the following. Also be sure to check the docs the explanation video is really great to help you get started. https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Let see if you could get what you want from here and if not post back here with your question!

Link to comment
Share on other sites

15 minutes ago, mvaneijgen said:

Hi @jofairden welcome to the forum!

 

I had to remove your CSS and other stuff, because they where part of the assets and where not accessible for me and to make sure there where no conflicts disabling them seemed to be the easiest way.

 

 

 

 

You control the start of each ScrollTrigger with the `start:` triggers, I've set it to the top of the element with the top of the browser. If you want it to start directly when the page loads you'll have to calculate how much the first div is offset from the top of the page. I've also changed you're `end:` trigger to be the bottom of the element, I think 'max' is the full height of the scrollable area, so that is not what you want in this case

 

 

 

 

I think to learn ScrollTrigger you'll need to take it slow and see things step by step, so what do you think of the following. Also be sure to check the docs the explanation video is really great to help you get started. https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Let see if you could get what you want from here and if not post back here with your question!

 

Actually, max is the end that I want.. My content won't go beyond this scrollable.. I want the header and nav to always to in view. Thats why I made them have sticky positioning. I've come pretty far with this script:

 

cards.forEach((card, index) => {
  ScrollTrigger.create({
    trigger: card,
    start: "top top+=400",
    pin: true,
    pinSpacing: false,
    markers: true,
    id: 'pin',
    end: 'max',
    invalidateOnRefresh: true,
    scrub: 2
  });
});

 

What I am struggling with is that the divs seem to overlap and no longer have their original space between them. I am also changing the scale of the header down as scrolled down, but I dont know how I can move the pinned items up to compensate for the size change of the header.. (And it scales back as you scroll back up, so the divs should be moved down again accordingly)

 

See this pen, this is roughly the behavior I have right now.. My issue stated above

Link to comment
Share on other sites

Quote

What I am struggling with is that the divs seem to overlap

They overlap because you pin them. If you don't pin them they will not overlap

See the Pen rNdqRQe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

10 minutes ago, jofairden said:

... no longer have their original space between them

The divs don't have any space between them. If you disable all your Javascript they all touch each other. 

See the Pen WNzamgW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Quote

 I am also changing the scale of the header down as scrolled down

That will indeed be a really tricky calculation, I don't know a solution for that, but that is also omitted from your demo.

 

Also you have `scrub: 2` in your code, but you have nothing you are animating. I would really encourage you to check out the ScrollTrigger docs page and check out @Carl's videos to help you get started, because if feels like you are trying to run before you can walk. 

 

 

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, mvaneijgen said:

They overlap because you pin them. If you don't pin them they will not overlap

 

 

 

The divs don't have any space between them. If you disable all your Javascript they all touch each other. 

 

 

 

That will indeed be a really tricky calculation, I don't know a solution for that, but that is also omitted from your demo.

 

Also you have `scrub: 2` in your code, but you have nothing you are animating. I would really encourage you to check out the ScrollTrigger docs page and check out @Carl's videos to help you get started, because if feels like you are trying to run before you can walk. 

 

 

 

Well I want to animate it.. I want it to be smoother. But right now it's just natively scrolling through, I suppose I should be using the smooth scroll plugin for that?

Right now I have it working the way I vision.. sort of.. the  divs feels jittery, but they move up with the header..
What do you think?
Also in the original site im making, the divs do not have a background, so when they overlap you can see the previous divs.. What Im trying to do is fade them if the other div comes on top, but I'm not sure how to get/use the next div's Y position to do that..

 

 

The effect im trying to achieve is something like this: https://stackoverflow.com/questions/9525215/using-css-can-you-apply-a-gradient-mask-to-fade-to-the-background-over-text So my idea is to apply that based on the Y position of the next div.. just unsure if GSAP is capable of doing this. I ve been failing so far

Link to comment
Share on other sites

Hi there!

Unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or tutorials. We just want to manage expectations here.  

We're more than happy to help with GSAP-specific questions here, but If you need more 'step by step' guidance we suggest popping over to the "Jobs & Freelance" forum for paid consulting.

We really recommend this video too

 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

Link to comment
Share on other sites

1 hour ago, GSAP Helper said:

Hi there!

Unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or tutorials. We just want to manage expectations here.  

We're more than happy to help with GSAP-specific questions here, but If you need more 'step by step' guidance we suggest popping over to the "Jobs & Freelance" forum for paid consulting.

We really recommend this video too

 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.


Im not asking for consulting.. I just have one issue with GSAP that I don't know how to solve.. Please see previous post..
When I am using the pinned feature of ScrollTrigger, the sections are overlapping (see the middle section for example)

I don't know why it's doing that..

Link to comment
Share on other sites

Ah, I see what you mean. That appears to be an issue with setting end: "max" in your particular scenario where some elements may never reach their "start" and the "end" ends up being set to a value less than the start. 

 

Solution: just set end: 99999 (some large number)

 

I believe it should be fixed in the next release which you can preview at: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

Which requires that you use the beta of the core gsap: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Here's a fork: 

See the Pen bGvQpzY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, you don't need to wrap your tween values in css:{}

  • Like 1
Link to comment
Share on other sites

6 hours ago, GreenSock said:

Ah, I see what you mean. That appears to be an issue with setting end: "max" in your particular scenario where some elements may never reach their "start" and the "end" ends up being set to a value less than the start. 

 

Solution: just set end: 99999 (some large number)

 

I believe it should be fixed in the next release which you can preview at: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

Which requires that you use the beta of the core gsap: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Here's a fork: 

 

 

 

Also, you don't need to wrap your tween values in css:{}

I see... what I dont get is that in the codepen the page ends nicely where the last div stops.. When I set it to 9999 on my page the page becomes really long. Is there another option I've missed there? I do have a footer that comes after which is where the page should stop. Maybe I should calculate the height of the content plus the footer instead?

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...