Pin and element following scroll progress

[MCBS]

Hi, I'm trying to create a section (ideally a timeline). In this section there are 3 parts:

1) "intro": a div pinned

2) "marker" indicates scrolling level of history

3) History: list of milestones

 

Additionally, I'm trying to place two divs (on top and bottom) with a gradient, to give effect to "gradually disappear" on History.

 

I'm not very confident on this code, I think there's a way better to reach same result.. Also, this is not responsive, and my tests with refresh() or kill() doesn't work as expected.

See the Pen vYbqOBX by smino (@smino) on CodePen

[Rodrigo]

Hi @MCBS and welcome to the GSAP Forums!

 

Your code is actually doing what is supposed to, it's a nice effect for the reveal/hide under the top bottom gradients.

 

The only thing I'd advise you is to change ScrollTrigger matchMedia (which is now deprecated) for GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Finally in terms of responsiveness: what is exactly the issue here? I see the list overflowing, but most likely that has to do with CSS rather than GSAP:

The issue seems to come from something in your HTML/CSS, honestly I can't seem to understand why you have all these pseudo classes here:

.marker-wrapper {
  .marker {
    &:before {
      content: "";
      background: var(--color_light);
      position: absolute;
      width: 22px;
      transform: translateX(-11px);
      left: 50%;
      height: 3000px;
      bottom: 8px;
      z-index: 1;
      opacity: .1;
    }

    @media(min-width: $lg) {
      &:before {
        width: 36px;
        transform: translateX(-18px);
      }
    }

    @media(min-width: $xl) {
      &:before {
        width: 44px;
        transform: translateX(-22px);
      }
    }

    @media(min-width: $xxl) {
      &:before {
        width: 66px;
        transform: translateX(-33px);
      }
    }
  }
}

I've created and seen plenty of similar demos that work as expected and have no issues with responsiveness:

See the Pen JjwdBJG by GreenSock (@GreenSock) on CodePen

 

I created a fork of your demo and what gets my attention is that even with this simple ScrollTrigger instance, the start marker gets shifted when resizing the browser window:

See the Pen abXgdZR by GreenSock (@GreenSock) on CodePen

 

Oddly enough this happens only in chrome, on firefox (both tested in ubuntu 20 & 22) it works without any issue.

 

I would strongly recommend you to simplify your HTML/CSS as much as possible in order to have even a single simple ScrollTrigger instance working as expected first, then move on to adding more ScrollTrigger instances.

 

Happy Tweening!

[MCBS]

I updated my original pen, replacing variables with functions, and fixing marker css (I forgot position: relative). 

The before pseudo class on .marker is a trail of marker (which changes his dimensions due to breakpoints).  

 

My primary issue is that resizing browser window, top and bottom gradients don't pin exactly on top/bottom of the trigger section, in some cases it's very wrong.

 

I don't understand if it is an error in my code, or a wrong refresh of scrolltrigger, or else.

[mvaneijgen]

I've been resizing the page from small to big, big to small, but I see no issue. Also I see a lot of developers complaining about "it breaks if I resize", but I've never come across a 'normal' visitor that goes half way through a page and then goes "let me resize my browser now that I've seen half of the page", this is only something we as developers do to check our break points. So I don't know how much time wasting on that edge case no one will ever see is worth it, but maybe that's just me? Can you maybe elaborate what browser/OS you're using? 

 

GSAP is really smart and it will 'cache' all your values if you don't specifically tell it to recalculate its values. You can do this by passing in a value 

 

// This will cache the value 
y: getScrollDistance(),

// This will get a new value when calling ScrollTrigger.refresh()
y: () => getScrollDistance(),

Hope it helps and happy tweening! 

[MCBS]

I tried another approach, pinning the entire section and scrolling the content (also thanks to some pen found around).

I like this result, and works well on any resolution, but responsive still not working as expected.

 

Is there a listener or a function I can use to force recalculation? "refreshInit" and refresh() seems not to work (I think I'm doing it wrong).

 

Here new pen: 

 

See the Pen jOdgzRP by smino (@smino) on CodePen

[Rodrigo]

Hi,

 

As mentioned before this is not a GSAP related issue, but something that stems either from the calculations you're making or your HTML/CSS setup.

 

Here is a super simple demo that borrows the top/bottom gradient concept while pinning an entire section and moving one of the columns of said  section:

See the Pen vYbovRq by GreenSock (@GreenSock) on CodePen

 

As you can see there is no responsive issue at all there. I still think that you could and should simplify this a bit.

 

Hopefully this helps.

Happy Tweening!

[MCBS]

I haven't been able to simplify the code and do any testing yet, but for now thank you all for your input, I think that's not really gsap related issue.