Jump to content
Search Community

ScrollTriger Pin Content

Sukru test
Moderator Tag

Go to solution Solved by Reksa Andhika,

Recommended Posts

Hi,

 

The problem is when you pin an element that has display: flex. Is better to avoid that in these cases. From the ScrollTrigger docs, pinSpacing config section:

 

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

Is better to wrap everything in an element that gets pinned and the content inside of the pinned element gets the flex display. Here is a fork of your example:

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

 

If this is not what you're having issues with, please be more specific about it.

 

Happy Tweening!

Link to comment
Share on other sites

23 minutes ago, Rodrigo said:

Hi,

 

The problem is when you pin an element that has display: flex. Is better to avoid that in these cases. From the ScrollTrigger docs, pinSpacing config section:

 

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

Is better to wrap everything in an element that gets pinned and the content inside of the pinned element gets the flex display. Here is a fork of your example:

 

 

 

If this is not what you're having issues with, please be more specific about it.

 

Happy Tweening!

 

Thanks but this is not what I want :( As in the example, where the content part needs to be hovered over. And there are 2 different images in the content, the second image does not come.

 

Link to comment
Share on other sites

Hi,

 

1 minute ago, Sukru said:

As in the example, where the content part needs to be hovered over.

Sorry but I just can't understand what you mean by this :(

 

2 minutes ago, Sukru said:

And there are 2 different images in the content, the second image does not come.

That's because your container has a fixed height of 100vh, it'll never do:

.pin-content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
}

The first image is the only one visible.

 

Happy Tweening!

Link to comment
Share on other sites

10 minutes ago, Rodrigo said:

Hi,

 

Sorry but I just can't understand what you mean by this :(

 

That's because your container has a fixed height of 100vh, it'll never do:

.pin-content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
}

The first image is the only one visible.

 

Happy Tweening!

Ok I removed those features but it still didn't work. I want the <section class="start-image"> to actually be fixed and the content underneath it to slide over it.

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