Scroll animation with fixed columns

[Daniel Matt]

I have a layout that includes a full-width image and below 2 columns with text.

 

1. In the beginning I would like to hide text columns, so it is something like an image covering the whole text in the viewport.

 

https://prnt.sc/qMmbPSGgazwy

 

2. When you start scrolling the image moves up (like a normal scroll) and then uncovers the "fixed" lext column.

https://prnt.sc/DsNgwu3TfMla

https://prnt.sc/ITl-ejbnOFfR

 

3. When I scroll enough, I have a gap between the image and the left column.

I would like to lock the position of the image (so it is a little) visible above the left column.

 

https://prnt.sc/BhYYBCI0WsHM

When I scroll more,  then it will appear scrolling the right column up. The right column will be moved up as long as reaches the left column top.

 

https://prnt.sc/PUsj_YQneNCV

 

4. After reaching the position, then it will start in the normal scroll.
 

I tried a few methods with sticky, fixed positions, but I stuck with that. Any help here?

See the Pen rNgedKL by Matteokr (@Matteokr) on CodePen

[Toso]

something like this? 

I created a simple timeline where the img goes up first then the right-text comes from the bottom 

 

See the Pen XWwKXQq?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen

[Daniel Matt]

Thank you it is a great solution.

I modified your code and added a fixed header and padding top for the <main> element.

See the Pen ExzyEpy by Matteokr (@Matteokr) on CodePen

I would like make  2 more amends:

- the image will be visible a little when I have fixed header
- with the left column I would like that always be below the image when scrolling (keep all time the same gap for example 50px) and lock when the image will be locked at the top
- the behaviour of the right columns is correct

Should I add any gsap animation to the left column? How to achieve that image and left column will move exactly the same amount of px together?
 

[Rodrigo]

Hi,

 

Maybe something like this (better in full screen view probably):

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

 

Happy Tweening!

[Daniel Matt]

I have prepared 1 more codepen wher I have only pinned left and right column. The image above should scroll normal.
The ScrollTrigger should only work for desktop design.

See the Pen ExzyEpy by Matteokr (@Matteokr) on CodePen

All works well when I load a page from the top (scrollTop = 0).
But, when I scroll my page to any section below the animated section (for example to Section 5) and then try to reload the page, when I scroll up to see the animation, there is a huge gap between the animated columns and the image above. Also, both columns are not animated.

[Rodrigo]

Hi,

 

I believe the issue is somewhere else in your setup, most likely in the CSS you have in place. On top of that I wouldn't use jQuery's animate function to create the ScrollTrigger and MatchMedia instances, just use a regular function for that:

function blockPinned() {
  let section = $(".pinned-section"),
      leftCol = section.find('.text-left'),
      rightCol = section.find('.text-right'),
      mm = gsap.matchMedia();

  mm.add("(min-width: 992px)", () => {
    ScrollTrigger.create({
      trigger: leftCol,
      start: "top 250",
      end: "top 250",
      endTrigger: rightCol,
      pin: true,
      pinSpacing: true,
      scrub: 1,
      markers: { indent: 300 },
      id: "left"
    });
  });
}

Honestly I don't see the need and/or use for the animate method in there.

 

Finally, as I mentioned before, this is more likely caused by something else in your setup. I created a fork of my previous codepen demo and it seems to work as expected:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

I forgot, this is the debug view, which allows you to test how the browser refresh is working without all the iframes on codepen's edit mode:

See the Pen LYobgva by pen (@pen) on CodePen

 

Happy Tweening!

[Daniel Matt]

I think I found the issue the problem is appearing when I have the CSS property scroll-behaviour: smooth.
 

html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

Can you see the problem with that? I suppose that causes the problem with that loading position on the scroll.

[Rodrigo]

The only thing I can think of is scroll-beahvior: smooth;, we've seen a fair amount of issues related to that here in the forums.

 

Also I would be careful with scroll-padding-top since that could lead to some issues with ScrollTrigger calculations:

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

 

Happy Tweening!