Jump to content
Search Community

Scroll animation with fixed columns

Daniel Matt test
Moderator Tag

Recommended Posts

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.




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




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.



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.




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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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)", () => {
      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!

  • Like 1
Link to comment
Share on other sites

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.

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...